无法绑定到'ng-forOf',因为它不是已知的本机属性

Question

我想在这里遵循基本的Angular 2教程:

https://angular.io/docs/js/latest/guide/displaying-data.html

我可以使用以下代码加载角度应用并显示我的名字:

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

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

<router-outlet>虽然元素名称没有改变,但仍然与自定义元素规范兼容,后者需要在自定义元素的标记名称中使用破折号.

在> = RC.5(和最终)中 ngFor,类似的指令默认不是环境.需要明确提供它们

@NgModule({
  imports: [CommonModule],

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

@NgModule({
  imports: [BrowserModule],

该BrowserModule出口CommonModule喜欢也WorkerAppModule一样.

更新

所述BrowserModule应该应用程式模块中被导入,在其它模块CommonModule应当代替进口.

Answer 2

使用Angular 2.1.0+

看起来这是相同的,除了你应该导入BrowserModule你的应用程序模块并导入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 { }

Answer 3

在Angular2 beta中ng-for是不正确的.它应该是*ngFor.

Answer 4

ngIf和ngFor被声明在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 Module

Answer 5

ngFor指令的语法为

<tr *ngFor="let name of names">{{name}}</tr>

请注意，它不再是名称的#name，而是让名称的名称和ngFor要求*且区分大小写。