Angular2非同期のネストされたデータ

Question

テーブルにデータを表示するAngular2コンポーネントがあります。

export class DiagnosisComponent { 

    headers: Array<String> = ["hello world", "hello world"]; 
    table: Observable<TableData>; 

    constructor(private eventService: EventService) { 
    this.table = this.eventService.getDiagnosisEvents(); 
    this.table.subscribe(console.log.bind(console)); 
    } 

} 

そしてここTABLEDATAクラスは

ある

export class TableData { 

    content: Array<any>; 
    paging: Paging; 

    constructor(obj: any) { 

    this.paging = { 
     size: obj.size, 
     totalElements: obj.totalElements, 
     currentPage: 1 
    }; 

    this.content = obj.content; 

    } 

} 

export interface Paging { 
    size: number; 
    totalElements: number; 
    currentPage: number; 
} 

今私は、非同期パイプで* ngForにtable.content配列をバインドします。私の問題は、TableData自体ではなく、ネストされたデータを取得する必要があることです。

<div class="row"> 

    <vpscout-filter></vpscout-filter> 

    <table class="table"> 
    <thead> 
    <tr><th *ngFor="let header of headers">{{header | translate}}</th></tr> 
    </thead> 
    <tbody> 
    <tr *ngFor="let row of table | async "> 
     <td>test</td> 
    </tr> 
    </tbody> 
    </table> 

</div> 

* ngForを<tr *ngFor="let row of table.content | async ">に変更すると機能しません。

Answer 1

私はこのような同様の問題解決：私は私のプロジェクトのためにimmutableJsを使用して観察可能なデータをマッピングするように変換しています、ので、私のために働いた厳密解だった

<tr *ngFor="let row of (table | async)?.content "> 
     <td>test</td> 
</tr> 

を：

<tr *ngFor="let row of (table | async)?.get('content') "> 
     <td>test</td> 
</tr> 

Answer 2

あなたは、コンテンツのための新しいフィールドを作成することができます

this.table.subscribe((data)=>{ 
    this.tableContent = data.content 
}); 

をして*ngFor

<tbody *ngIf="tableContent"> 
    <tr *ngFor="let row of tableContent"> 
     <td>test</td> 
    </tr> 
</tbody> 

Answer 3

tableに新しいフィールドがタイプObservableなくTABLEDATAクラスのインスタンスであることをバインドします。 Observableのsubscribeメソッドを使用して、TableDataのインスタンスをテンプレート/ビューにバインドされた変数に割り当てる必要があります。