首页 文章

Angular2（最终版本）* ngFor in component：'t bind to ' ngForOf ' since it isn' t 'div' [duplicate]的已知属性

提问于
浏览 次
6

这个问题在这里已有答案：

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

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

未处理的Promise拒绝：模板解析错误：无法绑定到'ngForOf'，因为它不是'div'的已知属性 . （“<div class =”item“[ERROR - >] * 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>

DashboardModule

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

AppModule

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

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

angular angular2-directives ngfor

1 回答

  • 12

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

    回复于

相关问题