获取所有数据后显示表格（ag网格）

Question

我有一个表，我只想在 this.rowData 完全填满时才显示（因此所有数据都被获取）。问题是我用两个 http 调用来填充它：

ngOnInit() {
    this.getTasks(this.item.availableTasks$); // This are the first data I want to fetch
    this.getTasks(this.item.myTasks$); // This are the second data I want to fetch (now this.rowData have all the datas I need)

  }

  getTasks(taskType): void {
    // taskType is a replaySubject that returns an Observable
    taskType.subscribe( 
      (tasksObservable: Observable<any>) => {
        tasksObservable.subscribe(
          (tasks: any) => {
            for (const task of tasks) {
              this.rowData.push(task ); // This is where i push datas into my array
            }
          }
        );
      }
    );
  }

在这里，我调用getTasks 两次以填满我的rowData 数组。当 ngOnInit 中的控制台登录 rowData 时，它会正确显示我的所有数据。但我看到的结果只是我第一次调用的数据。

这是表格：

<ag-grid-angular
    *ngIf="rowData.length != 0"
    class="col-12"
    style="height: 500px;" 
    [enableSorting]="true"
    [enableFilter]="true"
    [enableColResize]="true"
    [pagination]="true"
    [paginationPageSize]="15"
    [rowSelection]="rowSelection"
    (gridReady)="onGridReady($event)"
    class="ag-theme-balham"
    [rowData]="rowData" 
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    >
</ag-grid-angular>

如何在显示表格之前等待两个调用结束？ 额外问题：我的 getTasks 方法由于双重订阅而有点乱，我该如何清理它？

谢谢！

Answer 1

请注意 Angular 2+ 中的不变性，请参阅 https://angular-2-training-book.rangle.io/handout/immutable/what_is_immutability.html。

您应该将新项目推送到this.rowData：

this.rowData = [
  ...this.rowData,
  task
];

this.rowData.push() 方法不遵守不变性模式。