Angular2 (wersja ostateczna) * ngFor w komponencie: Nie można powiązać z 'ngForOf', ponieważ nie jest to znana właściwość 'div'

Question

Zacząłem używać Angular2 (wersja ostateczna) i mam pewne problemy z * ngFor.

I został zbudowany następujące drzewo części: główna -> tablica rozdzielcza -> alarmuje

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.

To działa ok, ale kiedy jestem Próbowałem dodanie * ngFor pętlę w składniku alarmów mam następujący błąd:

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() { 
    } 
} 

alarmy .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 Czytałem wiele proponowanych rozwiązań tego problemu, ale żaden z nich rozwiązał ten

Answer 1

Powinieneś zaimportować CommonModule w module głównym i BrowserModule w innych modułach (jeśli pracujesz z wieloma modułami). Mam ten sam problem i to działa dobrze dla mnie