小编Nat*_*Elg的帖子

加载叠加适用于初始加载。

HTML

  <ag-grid-angular #agGrid style="width: 100%; height: 550px;" 
    class="ag-theme-balham" [gridOptions]="gridOptions" 
    [rowData]="filteredTasks$ | async" 
    (selectionChanged)="onSelectionChanged()" 
    (rowClicked)="onRowClicked($event)">
  </ag-grid-angular>

组件.ts

    filteredTasks$: Observable<TaskListDto[]>;

    this.filteredTask$ = this.taskService.getFilteredTasks(httpParams);

我有一个用户选择的过滤器，它使用新的 httpParams 进入数据库并返回用户请求的数据。我什至无法强制加载覆盖。由于某种原因，设置为 observable 只会导致网格显示“无行显示”

即使我强制 api 显示我想要的内容，某些东西也会覆盖我的覆盖层。下面是我用来弄清楚有什么东西迫使“无行显示”的代码

    1st debugger;
    this.gridApi.setRowData([]);
    2nd debugger;
    this.filteredTasks$ = this.taskService.getFilteredTasks(httpParams);
    3rd debugger;
    this.gridOptions.api.hideOverlay();
    4th debugger;
    this.gridOptions.api.showLoadingOverlay();
    5th debugger;

显示第一个调试器命中和以前的数据

第二个调试器命中并且 ag 网格为空且不显示任何行

第三个调试器命中并且仍然没有显示任何行（即使数据源现在设置为使用异步管道的可观察对象）

第四次调试器命中并且根本不显示覆盖

第五个调试器命中，最后显示“正在加载”，但它立即被“无行显示”取代

到底是怎么回事？我在这里做错了什么？

我对 Observable 相当陌生，所以我相信必须有一种方法可以绕过我的 for 每个循环。

this.pages.forEach(page => {
  page.tasks = [];
  page.image = this.getImageData(this.proof.proofGuid, page.pageGuid);
  page.tasks = this.getPageTasks(this.order.orderNum);
});

这两个函数都从我的服务订阅了一个 observable，但是由于它们是异步的，所以 for 每个循环在数据返回并放在对象上之前就完成了。

getImageData(proofGuid, pageGuid) {
  this.proofService.getProofImage(proofGuid, pageGuid)
    .subscribe(image => {
      return image;
    });
}

getPageTasks(orderNum) {
  this.taskService.getTasksByOrderIdForProof(orderNum)
    .subscribe(data => {
      if (data) {
        return data;
      }
    });
}

现在我别无选择，只能循环获取每个页面的数据。我相信必须有一种方法可以基本上强制完成订阅，然后才能进入 for each 的下一页。