Question

我只是创建了服务并在组件中注册它。但是从服务中获取数据＆＃34; ngFor＆＃34;不管用。它显示以下错误：

属性绑定ngforFor嵌入式模板上的任何指令都没有使用。确保属性名称拼写正确，所有指令都列在＆＃34; @ NgModule.declarations＆＃34;。

这是我的代码，

import { Component, Input, OnInit } from '@angular/core';

import { UserService } from '../user.service';

@Component({
  selector: 'app-tutorial',
  template: `<p>tutorial works!</p>
          <p> {{userName | uppercase}} </p>
          <ul *ngfor="let user for users">
              <li>{{user.name}}</li>

          </ul>
        `
  })
export class TutorialComponent implements OnInit {
  @Input()
  public userName:String;

  users=[];

  constructor(private _userService: UserService){  }

  ngOnInit(){
    this.users=this._userService.getUsers();
  }


}

这是我的服务，

import { Injectable } from '@angular/core';

@Injectable()
export class UserService {
getUsers(){
  return[
    {'id':1,'name':'Jyoti','password':'123'}
    ];
  }


}

在appcomponent中，我已经注册了该服务，

import { Component } from '@angular/core';
import {TutorialComponent} from './tutorial/tutorial.component';
import { UserService } from './user.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers:[UserService]
})  
export class AppComponent {

  title = 'My Angular2 Login App';
  public msg1:string;
  public uname;
  public psw;
  onClick (value1,value2) {
    console.log('Username: '+value1+', password:' +value2);
  }

}

请为此建议解决方案。

Answer 1

问题是因为“* ngfor”使用“* ngFor”

 <ul *ngFor="let user for users">
          <li>{{user.name}}</li>

  </ul>

ng不绑定到HTML元素

1 个答案: