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

【问题标题】：Can't bind to 'ng-forOf' since it isn't a known native property [duplicate]无法绑定到“ng-forOf”，因为它不是已知的本机属性[重复]
【发布时间】：2016-03-17 16:29:20
【问题描述】：

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

我错过了什么？

【问题讨论】：

有时是因为 IDE 中的插件失败（VS Code、Web Storm）。在这里查看我的答案：stackoverflow.com/a/70368326/4079915

标签： angular

【解决方案1】：

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

像<router-outlet> 这样的元素名称没有更改，但为了与自定义元素规范保持兼容，自定义元素规范需要在自定义元素的标签名称中添加破折号。

在 >= RC.5 (and final) ngFor 和类似的指令默认不是环境的。它们需要像

一样明确提供

@NgModule({
  imports: [CommonModule],

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

@NgModule({
  imports: [BrowserModule],

BrowserModule 导出 CommonModule 也像 WorkerAppModule 一样。

更新

BrowserModule 应该在 app 模块中被导入，而在其他模块中 CommonModule 应该被导入。

【讨论】：

[ng-form-model] 到 [ngFormModel] 也是如此
ngStyle 也是如此
当然。所有指令都以这种方式命名。
我创建了一个子模块，但我不知道之前所有使用*ngIf等的模块都需要导出BrowserModule。谢谢
@JoaozitoPolo 所有使用*ngIf 等的模块都应该导入 CommonModule，只有AppModule 应该导入BrowserModule

【解决方案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 { }

【讨论】：

谢谢你，我正在拉头发看着所有说我拼错的帖子，但我错过了这个导入。
我要感谢...我将代码移到功能模块中，并试图弄清楚我搞砸了什么。

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

ngFor 指令的语法是

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

请注意，不再是 #name of names，而是 let name of names，并且 ngFor 需要 * 并且区分大小写。

【讨论】：

【解决方案6】：

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

Angular 模板替换对于 ngFor 和 ngIf 标记是区分大小写的，至少今天是这样，但我不能确定下周的情况。

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

当然它违反了 HTML5 标准。

之所以会这样，是因为我们最精彩的 angular2 开发认为 "they wish to follow html5 more closely"，但总有一些令人惊讶的例外，让 angular2 的工作总是越来越好。

【讨论】：

在将 HTML 传递给 Angular 模板编译器之前最小化 HTML 存在不止一个问题，例如，默认情况下，它会删除模板编译器（有时）无法处理的属性周围的引号。无论如何它都会被最小化（你现在肯定在使用 AOT，对吗？）所以只需禁用最小化：test: /\.component\.html$/, use: { loader: "html-loader", options: { minimize: false } }

【解决方案7】：

这也可能是由拼写错误引起的。我刚刚遇到了这个问题

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

如您所见，有 let order or orders 而不是 let order of orders

【讨论】：

【解决方案8】：

注意错字：这是

*ngFor

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

【讨论】：

【解决方案9】：

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

【讨论】：

【解决方案10】：

鉴于它在the other issue marked as a duplicate of this one 上取得了如此大的成功，以下是我的回复，得到了很多人的支持：

对于缺少它的人来说，我也遇到了一个问题，我输入的是 ngif 而不是 ngIf（请注意大写字母“I”）。

【讨论】：

【解决方案11】：

我的问题是由于缺少包含 *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。

【讨论】：