在 ag-grid 中加载数据时如何避免 "no rows" 消息

Question

我有一个 ag-grid，它通过 restful 调用从后端提取数据并通过 NGRX 模式路由。

   <ag-grid-angular #agGrid class="ag-theme-fresh" style="width: 100%; height: 100%;" [gridOptions]="gridOptions"
                 [rowData]="rowData"
                 [pagination]="true" [paginationAutoPageSize]='true' [enableSorting]="true"
                 [rowSelection]="rowSelection" [enableColResize]="true"
                 [enableFilter]="true" [rowClassRules]="rowClassRules" (rowClicked)="onRowClicked($event)"
                 (cellClicked)="onCellClicked($event)"
                 (gridReady)="onReady($event)">
</ag-grid-angular>

我有 2 个网格加载数据的场景。

场景 1： 我第一次在页面加载时加载它（通过 ngrx store ）

  this.QueueItems$ = this.store.select(fromStore.getQueueItems);

场景 2：我第二次有一个按钮可以从另一个商店刷新网格中的数据。

     <button mat-icon-button matTooltip="Refresh Grid" 
     (click)="handleOnGridRefesh($event)" matTooltipPosition="left"
      style="right: 2%;top: 0;margin-top: 7px;position: absolute;z-index:4">
     <i class="fa fa-refresh" style="color:#455A64" aria-hidden="true"></i>
      </button>


   //note:getQueueItemsStore is a different store ( ngrx) from getQueueItems
   handleOnGridRefesh($event: any) {
this.QueueItems$ = this.store.select(fromStore.getQueueItemsStore);
 }

我的问题是在单击按钮刷新网格后，ag 网格拉取数据并显示 "No rows to show" 叠加层时有 500 毫秒到 1 秒的短暂延迟。

没有the overlay in between as shown here?

如何顺利过渡

Answer 1

我使用 suppressNoRowsOverlay: true 作为 bc1105 在他们的评论中建议的，但这总是隐藏覆盖。如果加载完成后没有数据，我仍想显示叠加层。为了克服这个问题，我做了以下事情：

this.gridOptions.suppressNoRowsOverlay = true;
this.service.getData()
  .subscribe(data => {
    if (!data || !data.length) {
      this.gridOptions.suppressNoRowsOverlay = false;
      this.gridOptions.api.showNoRowsOverlay();
    }

Answer 2

Ag-grid提供两种基本方法：

this.gridApi.showNoRowsOverlay();（显示“没有要显示的行”消息）。
this.gridApi.hideOverlay();（清除所有覆盖）。

如果您有具体要求，请参阅 https://www.ag-grid.com/documentation/angular/overlays/

在 ag-grid 中加载数据时如何避免 "no rows" 消息

How to avoid the "no rows" message while loading data in ag-grid

rxjs

ag-grid

ngrx

angular

ngrx-store