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

Question

当在 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>

Answer 1

您可以将[overlayLoadingTemplate]="overlayLoadingTemplate"添加到您的 ag-grid 模板中。 就像在这个例子中：

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只是为了模拟一段时间后将获得结果的服务。

Answer 2

   showNoRowsMessage(): void {
    if (this.gridApi.getDisplayedRowCount() === 0) {
        (this.gridApi as any).gridOptionsWrapper.setProperty('overlayNoRowsTemplate', 'custom message');
    }
}

然后在 GridReady 方法中调用它：

    onGridReady(params: GridReadyEvent): void {
    ...
    this.showNoRowsMessage();
}

网格中没有其他添加选项/模板