时间戳

首页 > 解决方案 > 在 ag-grid 中加载数据时如何避免“无行”消息

angular - 在 ag-grid 中加载数据时如何避免“无行”消息

问题描述

我有一个 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);
 }

我的问题是在我单击按钮刷新网格后，有 500 毫秒到 1 秒的短暂时间延迟，其中 ag 网格正在提取数据并显示“无行显示”覆盖。

如此处所示，如何在没有中间覆盖的情况下顺利过渡？

标签： angularrxjsngrxag-gridngrx-store

解决方案

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

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

推荐阅读