Как избежать сообщения «нет строк» ​​при загрузке данных в ag-grid - PullRequest
Новая
       9

Как избежать сообщения «нет строк» ​​при загрузке данных в ag-grid

0 голосов
/ 27 июня 2018

У меня есть 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) 

  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 извлекает данные и отображает наложение «Нет строк для отображения».

Как можно плавно перейти без наложения между ними, как показано здесь?

1 Ответ

0 голосов
/ 08 августа 2018

Я использовал suppressNoRowsOverlay: true, как предложил bc1105 в их комментарии, но это всегда скрывает оверлей. Я хотел все еще показать наложение, если не было никаких данных после того, как это было сделано, загружая. Чтобы преодолеть это, я сделал следующее: 

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