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>之类的元素名称未经更改，但仍与自定义元素规范兼容，后者需要在自定义元素的标记名称中使用短划线。

在＆gt; = RC.5（和最终版） ngFor中，类似的指令默认情况下不是环境声明。需要明确提供它们，如

@NgModule({
  imports: [CommonModule],

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

@NgModule({
  imports: [BrowserModule],

同样BrowserModule的CommonModule导出WorkerAppModule也可以。

<强>更新

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

Answer 2

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

Answer 3

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 Module

Answer 4

ngFor指令的语法是

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

请注意，不再是#name名称，但让名称和ngFor需要*并且区分大小写。

Answer 5

在其他答案的背后，另一个可能的原因是你使用了一些html formatter-repacker，它将你的所有HTML - 包括组件模板 - 转换成小写。

Angular模板替换对ngFor和ngIf标记区分大小写，至少在今天，但我不能确定下周的任何内容。

特别是webpack插件，例如htmljs或html-minify，因为它们在默认设置下将所有内容转换为小写，所以效果很差。仔细检查已编译文本中的HTML代码，它可能全部使用小写（如*ngif= ...），即使在原始来源中它是正确的，也不会被接受！

当然它违反了HTML5标准。

之所以发生这种情况，是因为我们最精彩的angular2开发认为 "they wish to follow html5 more closely" ，但总有一些令人惊讶的异常，使得angular2的工作总是越来越好。

Answer 6

也可能是由错字造成的。我刚刚遇到了这个问题

<div class="row" *ngFor="let order or orders">

如您所见让订单或订单而不是让订单订单

Answer 7

请注意输入错误：是

* ngFor

不是ng-for
不是ngfor
不是ng-For

Answer 8

Angular 8解决方案

来源Link

如何解决此问题？

要解决此问题，我们需要在应用程序的邮件模块（即app.module.ts文件）中导入BrowserModule，并在子模块中导入CommonModule。

因此，导入后，我们的文件将如下所示：

app.module.ts

    // app.module.ts
    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';

    ...
    ...

    @NgModule({
        imports: [
            BrowserModule,
            ....
            ....

child.module.ts

    // child.module.ts
    ...
    ...
    import { CommonModule } from '@angular/common';

    @NgModule({
      imports: [
        CommonModule
        ...
        ...

Answer 9

鉴于它在the other issue marked as a duplicate of this one取得了如此大的成功，我的回应得到了很多赞成：

对于任何错过它的人来说，我也有一个问题，我输入的是ngif而不是ngIf（请注意国会大厦＆＃39;我＆＃39;）。

Answer 10

我的问题是由缺少包含* ngFor的组件的导出引起的。此组件（MyComponentWithNgFor）已导入并在我的SharedModule中声明。 SharedModule还导入了Angular的CommonModule，因此一切看起来都很好。

但是，我在另一个模块中将我的组件与* ngFor一起使用-我们称之为ModuleB-正在导入SharedModule，以便可以使用MyComponentWithNgFor。

我的解决方案只是将包含* ngFor的组件添加到SharedModule的导出数组中，如下所示：

@NgModule({
  imports: [ CommonModule ],
  declarations: [ MyComponentWithNgFor ],
  exports: [ MyComponentWithNgFor ]
})
export class SharedModule { }

这使我的ModuleB（导入SharedModule）可以使用MyComponentWithNgFor。

无法绑定到＆＃39; ng-forOf＆＃39;因为它不是一个已知的原生财产

10 个答案: