Question

我有一个ag-grid，它通过静态调用从后端提取数据，并通过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网格提取数据并显示“无行可显示”覆盖，这是500ms到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中加载数据时如何避免出现“无行”消息

2 个答案: