Angular2（final version）* ngFor在組件中：由於它不是'div'的已知屬性，因此無法綁定到'ngForOf'

Question

我開始使用Angular2（最終版本），我遇到了一些問題* ngFor。

我已經建立了以下組件樹： 主 - >儀表板 - >提醒

Unhandled Promise rejection: Template parse errors: Can't bind to 'ngForOf' since it isn't a known property of 'div'.

("<div class="item" [ERROR ->] *ngFor="let alert of alerts"> "): DashboardAlertsComponent@5:20 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 "directives" section.

它工作正常，但，當我嘗試添加* 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() { 
    } 
} 

警報.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（如果您正在使用多個模塊）。我得到了同樣的問題，它對我來說工作正常