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需要CommonModule中的imports

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

同样binding ngforOf not used表示您使用*ngfor代替*ngFor且资金为F。

Answer 2

有时您可能会在以下情况中忘记let：

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

应该是：

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

Answer 3

我想出了问题，我让webpack最小化了我的模板。一旦我将最小化关闭，那么它就可以正常工作。

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

Answer 4

有时在您使用

时可能会发生

* ngFor =“在dataList”> {{data}}

中添加数据

尝试将其更改为

* ngFor =“让dataList”> {{data}}

中的数据

您需要将“ in”替换为“ of”。

Answer 5

添加app.module.ts：

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

@NgModule({
    imports: [
        CommonModule,
    ],


})
export class AppModule { }