如何使用ag-grid显示特定的无行覆盖?

时间:2019-02-13 23:29:48

标签: angular ag-grid

当thera在Angular6中找不到使用ag-grid的用户时,我需要显示一条特定消息。

这是我的代码:

ngOnInit() {
  this.gridOptions.frameworkComponents.loadingCellRenderer = TableLoadingComponent;
  this.rowBuffer = 0;
  this.rowSelection = 'multiple';
  this.rowModelType = 'infinite';
  this.paginationPageSize = 10;
  this.cacheOverflowSize = 2;
  this.maxConcurrentDatasourceRequests = 1;
  this.infiniteInitialRowCount = 10;
  this.maxBlocksInCache = 2;

  this.overlayLoadingTemplate =
  '<span class="ag-overlay-loading-center">Please wait while your rows are loading</span>';
  this.overlayNoRowsTemplate =
  '<span class="ag-overlay-loading-center" style="font-size: 20px"><i class="fa fa-window-close"></i> Empty data</span>';
}

我只需要在我的用户列表组件中显示“未找到用户”,并显示“空数据”

<div class="card-body" style="height: 400px;">
  <ngb-alert [type]="alert?.type" *ngIf="alert" (close)="alert = null">{{alert?.message}}</ngb-alert>
  <app-table (readyGrid)="onGridReady($event)" (dbclickemitter)="edit($event)" [gridOptions]="gridOptions">
  </app-table>
</div>

1 个答案:

答案 0 :(得分:0)

您可以将[overlayLoadingTemplate]="overlayLoadingTemplate"添加到农业网格模板中。就像这个例子:

https://stackblitz.com/edit/ag-grid-bss-test-rb1jtp?file=app%2Fapp.component.html

在此示例中,我们将首先看到以下消息:

Please wait while your rows are loading

然后6秒钟后,您将看到数据已加载。

  

最初,rowData设置为null,然后,如果仍然无法找到任何数据,则不会为rowData提供新值,并且消息Please wait while your rows are loading仍将显示。您可以将Please wait while your rows are loading替换为No users found

我在这里使用setTimeout只是为了模拟将在一段时间后获得结果的服务。