Angular2(最终版本)*ngFor in component:无法绑定到'ngForOf',因为它不是'div'的已知属性

Question

我开始使用Angular2(最终版本),我在使用*ngFor时遇到了一些问题.

我已经构建了以下组件树:main - > dashboard - > alerts

未处理的Promise拒绝:模板解析错误:无法绑定到'ngForOf',因为它不是'div'的已知属性.

("<div class ="item"[ERROR - >]*ngFor ="让警报提醒">"):DashboardAlertsComponent @ 5:20属性绑定ngForOf未被嵌入式模板上的任何指令使用.

确保属性名称拼写正确,并且所有指令都列在"指令"部分中.

它工作正常,但当我尝试在警报组件中添加*ngFor循环时,我收到以下错误:

DashboardAlertsComponent:

import {Component, OnInit} from "@angular/core";
import {Alert} from "../../shared/models/alert.model";

@Component({
  selector: 'dashboard-alerts',
  templateUrl: './alerts.component.html'
})
export class DashboardAlertsComponent implements OnInit {

  alerts:Alert[] = new Array<Alert>();
  constructor() {
    this.alerts.push(new Alert('1', 'high', 'My alert1', '12/11/2016 4:50 PM'));
    this.alerts.push(new Alert('2', 'low', 'My alert2', '11/11/2016 9:50 PM'));
    this.alerts.push(new Alert('3', 'medium', 'My alert3', '10/11/2016 2:50 PM'));
  }

  ngOnInit() {
  }
}

alerts.component.html

<div class="item" *ngFor="let alert of alerts">
    <span class="priority {{ alert }}"></span>
    <span class="title">{{ alert }}</span>
    <span class="time">3:40 PM</span>
    <a href="#" class="more-actions"><span>Actions</span></a>
</div>

DashboardModule

@NgModule({
  declarations: [
    DashboardAlertsComponent
  ],
  providers: [],
  directives: [],
})
export class DashboardModule {
}

的AppModule

@NgModule({
  imports: [
    BrowserModule,
    DashboardModule
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

PS我为这个问题阅读了许多建议的解决方案但没有一个解决了这个问题

Answer 1

您应该CommonModule在主模块和BrowserModule其他模块中导入(如果您正在使用多个模块).我遇到了同样的问题,对我来说效果很好