角度异常：无法绑定到‘ngForIn‘，因为它不是已知的本机属性

本文翻译自：Angular exception: Can't bind to 'ngForIn' since it isn't a known native property

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

---

#1楼

参考：https://stackoom.com/question/2L0wC/角度异常-无法绑定到-ngForIn-因为它不是已知的本机属性

---

#2楼

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! 由于这至少是我第三次在这个问题上浪费超过5分钟，我想我会发布Q＆A。我希望它可以帮助其他人在路上...可能是我！

I typed in instead of of in the ngFor expression. 我输入in ，而不是of在ngFor表达。

Befor 2-beta.17 , it should be: Befor 2-beta.17 ，它应该是：

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

As of beta.17, use the let syntax instead of # . 从beta.17开始，使用let语法而不是# 。 See the UPDATE further down for more info. 有关详细信息，请参阅更新信息。

---

Note that the ngFor syntax "desugars" into the following: 请注意，ngFor语法“desugars”到以下内容：

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

If we use in instead, it turns into 如果我们使用in ，相反，它变成

<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. 由于ngForIn不是具有相同名称的输入属性的属性指令（如ngIf ），因此Angular会尝试查看它是否是template元素的（已知的本机）属性，而不是，因此是错误。

UPDATE - as of 2-beta.17, use the let syntax instead of # . 更新 - 从2-beta.17开始，使用let语法而不是# 。 This updates to the following: 这会更新到以下内容：

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

Note that the ngFor syntax "desugars" into the following: 请注意，ngFor语法“desugars”到以下内容：

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

If we use in instead, it turns into 如果我们使用in ，相反，它变成

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

---

#3楼

我的问题是，是的Visual Studio莫名其妙自动使用小写字母 *ngFor到*ngfor上复制和粘贴。

---

#4楼

在我的情况下，WebStrom自动完成插入小写*ngfor ，即使它看起来你选择了正确的驼峰（ *ngFor ）。

---

#5楼

我的解决方案是 - 只需从表达式^ __ ^中删除'*'字符

<div ngFor="let talk in talks">

---

#6楼

Try to import import { CommonModule } from '@angular/common'; 尝试import { CommonModule } from '@angular/common';导入import { CommonModule } from '@angular/common'; in angular final as *ngFor , *ngIf all are present in CommonModule 在角度最终为*ngFor ， *ngIf都出现在CommonModule