Question

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

我构建了以下组件树：主要 - ＆gt;仪表板 - ＆gt;警报

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

（“＆lt; div class =”item“[ERROR - ＆gt;] * ngFor =”让警报提醒“＆gt;              “）：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 {
}

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

Answer 1

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

Angular2（最终版本）* ngFor in component：无法绑定到'ngForOf'，因为它不是'div'

1 个答案: