ngFor 不工作

Question

我正在使用 Angular 4.3.3 和 JIT 编译器，当我运行我的应用程序时出现以下错误：

Property binding ngforOf not used by any directive on an embedded template. 
Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations".

我已确保在我的主应用程序模块中导入了 BrowserModule，并且我已经在我的子模块中导入了 CommonModule，此错误源自此。

这是抛出错误的模板：

<div class="background"></div>
<div class="content normal-page">
    <ons-fab position="top right" ripple>+</ons-fab>
    <ons-list>
        <ons-list-item *ngFor="let item of items; let i = index">
            <div class="center">
                #{{i}} msg: {{item.msg}}
            </div>
        </ons-list-item>
    </ons-list>
</div>

由于我将正确的模块导入到正确的位置，可能导致此错误的原因是什么？

Answer 1

包含您的组件的 NgModule 需要在 imports

中包含 CommonModule

@NgModule({
  ...,
  imports: [CommonModule],
})
export class MySharedModule {}

另外 binding ngforOf not used 表示您使用 *ngfor 而不是 *ngFor 大写 F.

Answer 2

我发现了问题，我让 webpack 最小化了我的模板。一旦我关闭了最小化，它就可以正常工作了。

{
    test: /\.html$/,
    use: [
        {
            loader: 'html-loader',
            options: {
                minimize: false
            }
        }
    ]
}

Answer 3

有时当您忘记在 for like 中输入 let 时会发生这种情况：

<span *ngFor="teacher of teachers">{{teacher}}</span>

应该是：

<span *ngFor="let teacher of teachers">{{teacher}}</span>

Answer 4

有时当您使用

时会发生这种情况

*ngFor="let data in dataList">{{数据}}

尝试将其更改为

*ngFor="let data of dataList">{{数据}}

您需要将 'in' 替换为 'of'。

Answer 5

添加 app.module.ts :

import { CommonModule } from '@angular/common';

@NgModule({
    imports: [
        CommonModule,
    ],


})
export class AppModule { }

Answer 6

您还需要确保您正在处理的组件已在您的 module.ts 文件中声明。

例如在您使用 *ngFor:

的组件中

@Component({
  ...
  template: '<div *ngFor="let thing of things">..</div>'
})
export class MyComponent {...

此组件也必须在您的 module.ts file:

中声明

@NgModule({
  ...
  declarations: [
    MyComponent
  ]

我使用 VS Code 扩展为我创建了我的组件，但没有在应用程序模块中注册它们，而且我经常忘记手动注册，导致了这个问题。

ngFor 不工作

ngFor is not working

angular2-directives

angular