Angular2 (окончательная версия) * ngFor в компоненте: не может связываться с 'ngForOf', так как это не известное свойство 'div'

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 в другие модули (если вы работаете с несколькими модулями). У меня такая же проблема, и она отлично работает для меня