角度异常:无法绑定到"ngForIn"，因为它不是已知的本机属性 [英] Angular exception: Can't bind to 'ngForIn' since it isn't a known native property

问题描述

我在做什么错了?

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分钟以上，因此我认为我会发布问题与解答".答:我希望它可以帮助其他人……可能是我！

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!

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

I typed in instead of of in the ngFor expression.

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

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

从beta.17开始，使用let语法而不是#.有关更多信息，请参见更下方的UPDATE.

As of beta.17, use the let syntax instead of #. See the UPDATE further down for more info.

请注意，ngFor语法将"desugars"转换为以下内容:

Note that the ngFor syntax "desugars" into the following:

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

如果我们改用in，它将变成

If we use in instead, it turns into

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

由于ngForIn不是具有相同名称的输入属性(例如ngIf)的属性指令，因此Angular会尝试查看它是否是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.

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

UPDATE - as of 2-beta.17, use the let syntax instead of #. This updates to the following:

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

请注意，ngFor语法将"desugars"转换为以下内容:

Note that the ngFor syntax "desugars" into the following:

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

如果我们改用in，它将变成

If we use in instead, it turns into

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

这篇关于角度异常:无法绑定到"ngForIn"，因为它不是已知的本机属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！