我有一个 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 数组绑定(bind)到 *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 ">
不起作用。
最佳答案
我解决了这样一个类似的问题:
<tr *ngFor="let row of (table | async)?.content ">
<td>test</td>
</tr>
因为我在我的项目中使用 immutableJs 并将可观察数据转换为 map ,所以对我有用的确切解决方案是:
<tr *ngFor="let row of (table | async)?.get('content') ">
<td>test</td>
</tr>
关于Angular2 异步嵌套数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41544244/