Ag网格和异步管导致加载覆盖时问题

Question

加载覆盖层在初始负载上均处于良好状态。

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>

component.ts

    filteredTasks$: Observable<TaskListDto[]>;
    this.filteredTask$ = this.taskService.getFilteredTasks(httpParams);

我有一个过滤器，用户可以选择使用新的HTTPPARAMS出口到DB的过滤器，并返回用户要求的数据。我什至无法强迫加载叠加层。由于某种原因，被设置为可观察的只是导致网格显示"无行显示"

即使我强迫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网格是空的，没有显示行

第三次调试器命中率仍然显示不显示（即使数据源现在用异步管道设置为可观察到的数据源）

）

第四次调试器命中，根本没有显示覆盖层

第五次调试器命中，最后显示了"加载"，但立即被"无行显示"

替换

发生了什么事？我在这里做错了什么？

Answer 1

第五次调试器命中，最后显示了"加载"，但立即被"无行显示"

替换

您的调试流是正确的，"没有行显示"在此步骤上显示loadNewData rows$获得了新的观察者绑定，但不应该。

一旦您设置了数据（在INIT阶段） - 完成之后，应通过gridApi

处理所有使用网格的操作

在您的情况下，应该这样做loadNewData：

loadNewData() {
    this.showOverlay();
    let request = of(this.rowData2).pipe(
      delay(5000)
    )
    request.subscribe(result=>{
      this.hideOverlay();
      this.gridOptions.api.setRowData(result)
    })
}