Angular 异常:无法绑定到“ngForIn"，因为它不是已知的本机属性 [英] Angular exception: Can't bind to 'ngForIn' since it isn't a known native property
问题描述
我做错了什么?
从 'angular2/angular2' 导入 {bootstrap, Component}@成分({选择器:'conf-talks'，模板:`<div *ngFor="let talk in talk">{{talk.title}} by {{talk.speaker}}<p>{{talk.description}}`})类 ConfTalks {谈话 = [ {title: 't1', 演讲者: 'Brian', 描述: 'talk 1'},{title: 't2', 演讲者: 'Julie', 描述: 'talk 2'}];}@成分({选择器:'我的应用'，指令:[ConfTalks]，模板:'<conf-talks></conf-talks>'})类应用{}引导程序(应用程序，[])
错误是
例外:模板解析错误:无法绑定到ngForIn"，因为它不是已知的本机属性("<div [ERROR ->]*ngFor="let talk in talk">因为这至少是我第三次在这个问题上浪费了超过 5 分钟的时间，所以我想我应该发布 Q &答:我希望它可以帮助其他人……可能是我！
我在 ngFor 表达式中输入了 in 而不是 of.
对于 2-beta.17，应该是:
<div *ngFor="#talk of talk">从 beta.17 开始，使用 let 语法而不是 #.有关更多信息，请参阅下方的更新.
注意ngFor的语法desugars"变成如下:
<div>...</div>如果我们使用in，它会变成
<div>...</div>由于 ngForIn 不是具有同名输入属性的属性指令(如 ngIf)，Angular 会尝试查看它是否是(已知的原生) 属性的 template 元素，它不是，因此错误.
UPDATE - 从 2-beta.17 开始，使用 let 语法而不是 #.这更新为以下内容:
<div *ngFor="let talk of talk">注意将ngFor语法desugars"改成如下:
<div>...</div>如果我们使用in，它会变成
<div>...</div>What am I doing wrong?
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, [])
The error is
EXCEPTION: Template parse errors:
Can't bind to 'ngForIn' since it isn't a known native property
("<div [ERROR ->]*ngFor="let talk in talks">
Since this is at least the third time I've wasted more than 5 min on this problem I figured I'd post the Q & A. I hope it helps someone else down the road... probably me!
I typed in instead of of in the ngFor expression.
Befor 2-beta.17, it should be:
<div *ngFor="#talk of talks">
As of beta.17, use the let syntax instead of #. See the UPDATE further down for more info.
Note that the ngFor syntax "desugars" into the following:
<template ngFor #talk [ngForOf]="talks">
<div>...</div>
</template>
If we use in instead, it turns into
<template ngFor #talk [ngForIn]="talks">
<div>...</div>
</template>
Since ngForIn isn't an attribute directive with an input property of the same name (like ngIf), Angular then tries to see if it is a (known native) property of the template element, and it isn't, hence the error.
UPDATE - as of 2-beta.17, use the let syntax instead of #. This updates to the following:
<div *ngFor="let talk of talks">
Note that the ngFor syntax "desugars" into the following:
<template ngFor let-talk [ngForOf]="talks">
<div>...</div>
</template>
If we use in instead, it turns into
<template ngFor let-talk [ngForIn]="talks">
<div>...</div>
</template>
这篇关于Angular 异常:无法绑定到“ngForIn"，因为它不是已知的本机属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
