例外：无法绑定到'ngFor'，因为它不是已知的本机属性

Question

我究竟做错了什么？

import {bootstrap, Component} from 'angular2/angular2'

@Component({
  selector: 'conf-talks',
  template: `<div *ngFor="talk of talks">
     {{talk.title}} by {{talk.speaker}}
     <p>{{talk.description}}
   </div>`
})
class ConfTalks {
  talks = [ {title: 't1', speaker: 'Brian', description: 'talk 1'},
            {title: 't2', speaker: 'Julie', description: 'talk 2'}];
}
@Component({
  selector: 'my-app',
  directives: [ConfTalks],
  template: '<conf-talks></conf-talks>'
})
class App {}
bootstrap(App, [])

错误是

EXCEPTION: Template parse errors:
Can't bind to 'ngFor' since it isn't a known native property
("<div [ERROR ->]*ngFor="talk of talks">

Answer 1

我在let面前错过了talk：

<div *ngFor="let talk of talks">

---

请注意，as of beta.17使用#...来声明NgFor等结构指令中的局部变量已被弃用。请改用let。 <div *ngFor="#talk of talks">现在成为<div *ngFor="let talk of talks">

原始答案：

我在#面前错过了talk：

<div *ngFor="#talk of talks">

很容易忘记#。我希望Angular异常错误消息代替： you forgot that # again。

Answer 2

另一个导致OP错误的拼写错误可能是使用in：

<div *ngFor="let talk in talks">

而不是of：

<div *ngFor="let talk of talks">

Answer 3

这个声明在Angular2 Beta版中使用.....

此后使用let而不是＃

let关键字用于声明局部变量

Answer 4

在我的情况下，这是一个小写字母f。我正在分享这个答案只是因为这是谷歌的第一个结果

一定要写*ngFor

Answer 5

对我来说，长话短说，我无意中降级为角度-β-16。

let ...语法仅在2.0.0-beta.17 +中有效

如果您对此版本以下的任何内容尝试let语法。您将生成此错误。

升级到angular-beta-17或使用#item in items语法。

Answer 6

在我的情况下，我犯了从文档中复制*ng-for=的错误。

https://angular.io/guide/user-input

如果我错了，请纠正我。但似乎*ng-for=已改为*ngFor=

Answer 7

我忘了用“@Input”注释我的组件（Doh！）

book-list.component.html（违规代码）：

<app-book-item
  *ngFor="let book of book$ | async"
  [book]="book">  <-- Can't bind to 'book' since it isn't a known property of 'app-book-item'
</app-book-item>

已更正的book-item.component.ts版本：

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

import { Book } from '../model/book';
import { BookService } from '../services/book.service';

@Component({
  selector: 'app-book-item',
  templateUrl: './book-item.component.html',
  styleUrls: ['./book-item.component.css']
})
export class BookItemComponent implements OnInit {

  @Input()
  public book: Book;

  constructor(private bookService: BookService)  { }

  ngOnInit() {}

}