Angular2 (endgültige Version) * ngFor in Komponente: Kann nicht an 'ngForOf' binden, da es keine bekannte Eigenschaft von 'div' ist.

Question

Ich habe Angular2 (endgültige Version) benutzt und habe ein paar Probleme mit * ngFor.

Ich habe den folgenden Komponentenbaum gebaut: Haupt -> Armaturenbrett -> Benachrichtigungen

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.

Es funktioniert ok, aber wenn ich * ngFor Schleife in Warnungen Komponente hinzugefügt bin versucht, ich habe folgende Fehlermeldung:

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

Benachrichtigungen .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 ich viele Lösungsvorschläge für dieses Problem, aber keiner von ihnen gelöst lesen Sie diese

Answer 1

Sie sollten CommonModule im Hauptmodul und BrowserModule in den anderen Modulen importieren (wenn Sie mit mehreren Modulen arbeiten). Ich habe das gleiche Problem und es funktioniert gut für mich