Angular2（最终版本）组件中的*ngFor：无法绑定到'ngForOf'，因为它不是'div'的已知属性[重复]

Question

我开始使用 Angular2（最终版本），但在使用 *ngFor 时遇到了一些问题。

我已经构建了以下组件树： 主 -> 仪表板 -> 警报

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

("

] *ngFor="let alert of alerts"> "): 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>

仪表板模块

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

AppModule

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

P.S 我阅读了很多针对这个问题的建议解决方案，但没有一个能解决这个问题

【问题讨论】：

• stackoverflow.com/questions/34228971/…

Answer 1

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