javascript – Angular2异常:无法绑定到“ngForIn”,因为它不是一个已知的本机属性

我究竟做错了什么?

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">
因为这是至少第三次我浪费了超过5分钟这个问题,我想我会发布的Q&我希望它帮助别人在路上…可能是我!

我输入,而不是在ngFor表达式。它应该是:

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

注意ngFor语法的“desugars”如下:

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

如果我们改用它,它变成

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

因为ngForIn不是具有相同名称的输入属性(如ngIf)的属性指令,因此Angular会尝试查看它是否是模板元素的(已知本机)属性,而不是,因此是错误。

UPDATE – 作为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>
http://stackoverflow.com/questions/34561168/angular2-exception-cant-bind-to-ngforin-since-it-isnt-a-known-native-proper

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:javascript – Angular2异常:无法绑定到“ngForIn”,因为它不是一个已知的本机属性