Angular2异步嵌套数据答案

【问题标题】：Angular2 async nested dataAngular2异步嵌套数据
【发布时间】：2017-05-23 11:47:32
【问题描述】：

我有一个 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 "> 不起作用。

【问题讨论】：

不应该是let row of (table | async).content吗？
@jonrsharpe 你真的应该提供这些作为答案（我可以理解你不再需要积分，但仍然......：P）。绝对是解决方案stackoverflow.com/a/35302622/5706293

标签： angular pipe

【解决方案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>

【讨论】：

是的，太好了，谢谢你和@jonrsharpe，但我必须添加一个？否则 'content' 在第一个 next() 之前为 null

【解决方案2】：

您可以为内容创建一个新字段：

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

并将新字段绑定到*ngFor

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

【讨论】：

【解决方案3】：

table 的类型为 Observable，而不是 TableData 类的实例。您需要使用 Observable 的 subscribe 方法将 TableData 的实例分配给绑定到模板/视图的变量。

【讨论】：