加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

Angular2异步嵌套数据

发布时间:2020-12-17 06:53:40 所属栏目:安全 来源:网络整理
导读:我有一个Angular2组件在表中显示一些数据. export class DiagnosisComponent { headers: ArrayString = ["hello world","hello world"]; table: ObservableTableData; constructor(private eventService: EventService) { this.table = this.eventService.ge
我有一个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 table of table | 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>

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读