web-dev-qa-db-ja.com

Angular2（最終バージョン）* ngForコンポーネント内：「div」の既知のプロパティではないため、「ngForOf」にバインドできません

Angular2（最終バージョン）を使い始めましたが、* ngForで問題が発生しています。

次のコンポーネントツリーを作成しました：メイン->ダッシュボード->アラート

未処理のPromise拒否：テンプレート解析エラー：「div」の既知のプロパティではないため、「ngForOf」にバインドできません。

（ "<div class =" item "[ERROR->] * ngFor =" let alert of alert ">"）：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私はこの問題に対して提案された多くの解決策を読みましたが、どれもこれを解決しませんでした

angularangular2-directivesngfor
7
John Smith

メインモジュールにCommonModuleをインポートし、他のモジュールにBrowserModuleをインポートする必要があります（複数のモジュールで作業している場合）。私は同じ問題を抱えていて、それは私にとってはうまくいきます

12
Mourad Idrissi