ngFor 未绑定到 HTML 元素

Question

我只是创建了服务并将其注册到组件中。但是从服务 "ngFor" 获取数据时不起作用。它显示以下错误：

Property binding ngforFor not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations".

这是我的代码，

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>

ngFor 未绑定到 HTML 元素

ngFor in not binding to HTML element

angular2-directives

angular2-services