我做错了什么?

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">

当前回答

尝试从'@angular/common'导入import {CommonModule};angular final中的*ngFor,*ngIf都存在于CommonModule中

其他回答

我的问题是,Visual Studio在复制粘贴时自动将*ngFor小写为*ngFor。

TL; diana;

使用让…而不是let…在! !


如果你刚接触Angular (>2.x),而且可能是从Angular1迁移过来的。X,很可能你把它和of搞混了。正如andreas在下面的评论中提到的……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">

因此,你必须将in替换为ngFor指令中的of来获取值。

我输入了而不是ngFor表达式。

之前2 beta。17、它应该是:

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

从beta开始。17、使用let语法代替#。更多信息请参见下面的UPDATE。


注意ngFor语法“desugars”变成如下:

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

如果我们用in代替,它就变成了into

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

由于ngForIn不是一个具有同名输入属性的属性指令(不像ngIf), Angular会尝试查看它是否是模板元素的一个(已知的本机)属性,而它不是,因此会出现错误。

更新-从2-beta开始。17、使用let语法代替#。更新内容如下:

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

注意ngFor语法“desugars”变成如下:

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

如果我们用in代替,它就变成了into

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

如果你想使用of而不是切换到in,还有另一种选择。您可以使用6.1中介绍的KeyValuePipe。你可以很容易地迭代一个对象:

<div *ngFor="let item of object | keyvalue">
  {{item.key}}:{{item.value}}
</div>

为了增加更多的问题,我天真地发现,如果你不使用let语句来分配循环的索引,你也会得到同样的错误:

<span *ngFor="let button of buttons; i: index; trackBy: trackBy">
...
</span>

也抛出相同的错误。下面的版本修复了它

<span *ngFor="let button of buttons; let i = index; trackBy: trackBy">
...
</span>