Angular Exception：无法绑定到“ng forin”，因为它不是已知的本机属性

Question

我做错了什么？

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

@Component({
  selector: 'conf-talks',
  template: `<div *ngFor="let talk in 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 'ngForIn' since it isn't a known native property
("<div [ERROR ->]*ngFor="let talk in talks">

Answer 1

尝试从“@angular/Common”导入导入{CommonModule}；以angular final形式作为*NGFOR,*NGIF全部存在于CommonModule中

Answer 2

匿名用户

用让...of代替让...in！！

如果您是Angular(>2.x)的新手，并且可能是从Angular1.x迁移过来的，那么您很可能会混淆in和of。正如andreas在下面的注释中提到的，for..of迭代对象的值而for..in迭代对象的属性。这是ES2015推出的新特性。

只需更换：

<!-- Iterate over properties (incorrect in our case here) -->
<div *ngFor="let talk in talks">

与

<!-- Iterate over values (correct way to use here) -->
<div *ngFor="let talk of talks">

因此，必须将中的替换为ngfor指令中的以获取值。

Answer 3

因为这至少是我第三次在这个问题上浪费超过5分钟的时间了，我想我应该把这篇问答文章贴出来，我希望它能帮助到其他人...可能是我！

我在ngFor表达式中键入了in而不是of。

在2-beta.17之前，它应该是：

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

从Beta.17开始，使用let语法，而不是#。更多信息请参阅更新。

请注意，ngFor语法“desugars”如下：

<template ngFor #talk [ngForOf]="talks">
  <div>...</div>
</template>

如果我们在中使用，它会变成

<template ngFor #talk [ngForIn]="talks">
  <div>...</div>
</template>

由于ngforin不是具有同名输入属性的属性指令（类似于ngif)，因此Angular尝试查看它是否是template元素的（已知本机）属性，而它不是，因此出现错误。

更新-从2-beta.17开始，使用let语法，而不是#。这将更新以下内容：

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

请注意，ngFor语法“desugars”如下：

<template ngFor let-talk [ngForOf]="talks">
  <div>...</div>
</template>

如果我们在中使用，它会变成

<template ngFor let-talk [ngForIn]="talks">
  <div>...</div>
</template>