无法绑定到“ng-forOf”，因为它不是已知的本地属性
我正在尝试遵循这里的基本Angular 2教程：
https://angular.io/docs/js/latest/guide/displaying-data.html
我可以得到angular应用程序加载和显示我的名字与此代码：
import { Component, View, bootstrap } from 'angular2/angular2'; @Component({ selector: "my-app" }) class AppComponent { myName: string; names: Array<string>; constructor() { this.myName = "Neil"; } } bootstrap(AppComponent); 但是，当我尝试添加一个string数组，并尝试用ng-for显示它时，它会抛出以下错误：
Can't bind to 'ng-forOf' since it isn't a known native property (" <p>Friends:</p> <ul> <li [ERROR ->]*ng-for="#name of names"> {{ name }} </li> "): AppComponent@4:16 Property binding ng-forOf not used by any directive on an embedded template (" <p>Friends:</p> <ul> [ERROR ->]<li *ng-for="#name of names"> {{ name }} </li> "): AppComponent@4:12
这里是代码：
import { Component, View, bootstrap } from 'angular2/angular2'; @Component({ selector: "my-app" }) @View({ template: ` <p>My name: {{ myName }}</p> <p>Friends:</p> <ul> <li *ng-for="#name of names"> {{ name }} </li> </ul> `, directives: [ NgFor ] }) class AppComponent { myName: string; names: Array<string>; constructor() { this.myName = "Neil"; this.names = ["Tom", "Dick", "Harry"]; } } bootstrap(AppComponent);
我错过了什么？
如果你使用alpha 52，请检查GitHub 仓库中的CHANGELOG.md 。 他们将模板更改为区分大小写，而不是ng-for （与所有其他指令类似）
像<router-outlet>这样的元素名称并没有被改变，而是保持与需要自定义元素的标签名称中的破折号的自定义元素规范兼容。
In > = RC.5（和final） ngFor和类似的指令不是默认的环境。 他们需要明确提供像
@NgModule({ imports: [CommonModule],
或者如果您不介意模块被locking为仅浏览器
@NgModule({ imports: [BrowserModule],
BrowserModule像CommonModule一样导出CommonModule 。
更新
BrowserModule应该被导入到应用程序模块中，而其他模块中的CommonModule应该被导入。
使用Angular 2.1.0+
看起来，这是相同的，除了你应该在你的应用程序模块中导入BrowserModule并在其他CommonModule导入CommonModule （无法导入BrowserModule两次路由延迟加载）。
用Angular 2 rc5：
这个版本引入了NgModules ，你需要在你的模块中导入BrowserModule以使用ngFor和ngIf ：
BrowserModule注册关键应用程序服务提供者。 它还包括常见的指令，如NgIf和NgFor，这些指令立即可见并可在任何模块组件模板中使用。
例：
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; @NgModule({ imports: [BrowserModule], providers: [], exports: [], declarations: [] }) export class MyModule { }
在Angular2 beta ng-for是不正确的。 它应该是*ngFor 。
ngIf和ngFor是在@ angular / common的 CommonModule中声明的。
CommonModule提供了许多应用程序需要的通用指令，包括ngIf和ngFor。
BrowserModule导入CommonModule并重新导出它。 最终效果是BrowserModule的导入器自动获取CommonModule指令。
更新您的代码如下
import { CommonModule } from '@angular/common'; @NgModule({ imports: [CommonModule] }) // In HTML <li *ngFor="let customer of customers">{{customer.name}}</tr>
获取更多信息Angular模块
ngFor指令的语法是
<tr *ngFor="let name of names">{{name}}</tr>
请注意， 名称不再是＃名称 ，而是让名称的名称和ngFor需要*和区分大小写。
在其他答案的背后，另一个可能的原因是您使用了一些HTML格式化程序 – 重新包装程序，它将所有的HTML（包括组件模板）都转换成小写字母。
Angular模板replace对ngFor和ngIf标签至less在今天是大小写敏感的，但是对于下一周我无法确定。
特别是webpack插件，例如htmljs或者html-minify工作不好，因为他们把所有的东西都转换成小写的默认设置。 在编译的文本中*ngif= HTML代码，它可能是全部小写（如*ngif= …），即使在您的原始来源是正确的，它将不被接受！
当然，它打破了HTML5标准。
这是因为我们最出色的angular2开发者认为“他们希望更紧密地遵循html5” ，但总会有一些令人惊讶的例外，使得angular2的工作总是越来越好。
