Angular2 async вложенные данные

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; 
} 

Теперь я хочу, чтобы связать table.content массив к * ngFor с асинхронным трубой. Моя проблема в том, что мне нужно получить вложенные данные, а не сами 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

я решил аналогичную проблему так:

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

Поскольку я использую immutableJs для моего проекта и преобразования наблюдаемых данных на карту, точное решение, которое работало для меня было:

<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 переменной, привязанной к шаблону/представлению.