无法绑定到“ng forOf”，因为它不是已知的本机属性[duplicate]

Question

我试图在这里遵循基本的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);

但是，当我尝试添加字符串数组并尝试使用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);

我错过了什么？

Answer 1

在Angular2 beta中，ng for不正确。它应该是*ngFor。

Answer 2

角度2.1.0

这似乎是一样的，只是你应该在你的应用模块中导入BrowserModule，在其他模块中导入CommonModule（加载时不能导入两次BrowserModule）。

带角度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 { }

Answer 3

如果您使用alpha 52，请查看GitHub存储库中的CHANGELOG. md。他们将模板更改为区分大小写的ngFor而不是ng-for（类似于所有其他指令）

元素名称，如

在里面

@NgModule({
  imports: [CommonModule],

或者如果您不介意模块被锁定为仅限浏览器

@NgModule({
  imports: [BrowserModule],

与WorkerAppModule一样，BrowserModule导出通用模块。

使现代化

应在应用程序模块中导入BrowserModule，而在其他模块中应导入CommonModule。