Ag Grid 和异步管道导致加载覆盖出现问题

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>

组件.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 网格为空且不显示任何行

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

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

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

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

Answer 1

第五次调试器命中，最后显示“正在加载”，但它立即被“没有可显示的行”取代

您的调试流程是正确的，显示“无行显示”，因为在此步骤中loadNewData rows$获得了新的观察者绑定，但它不应该。

一旦你设置了数据（在初始化阶段） -就完成了，之后 - 所有网格操作都应该通过gridApi

根据你的情况，loadNewData应该这样做：

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