如何在 ag-grid 中以编程方式更改 'no rows to show' 文本？

Question

我最近一直在修补 Ag-grid。当我从 REST API 获取一些数据时，我想将 'no rows to show' 文本更改为 'data is loading...' 。数据以 JSON 个对象数组的形式 returned。但是，如果 API 为我 return 一个空数组，我希望 'Data is loading...' 文本更改为 'no rows to show' text.How 我可以实现这个吗？提前致谢。

Answer 1

这可以通过同时使用 overlayLoadingTemplate 和 overlayNoRowsTemplate 输入绑定属性来完成，如 documentation.

中所述

在您的 component.html 上，您需要将其添加到您的 ag-grid 选择器中，

<ag-grid-angular
  class="ag-theme-balham"
  [columnDefs]="columnDefs"
  [defaultColDef]="defaultColDef"
  [rowData]="rowData"
  (gridReady)="onGridReady($event)"
  [overlayLoadingTemplate]="loadingTemplate"
  [overlayNoRowsTemplate]="noRowsTemplate"
        .
        .
></ag-grid-angular>

并且在您的 component.ts 上，您可以设置无行模板。首先，我们定义一个新的属性，叫做noRowsTemplate，它被分配给html上的overlayNoRowsTemplate。然后，将表示自定义消息的 html 字符串传递给 noRowsTemplate。

export class AppComponent {
  private noRowsTemplate;
  private loadingTemplate;

  constructor() {
    this.loadingTemplate =
      `<span class="ag-overlay-loading-center">data is loading...</span>`;
    this.noRowsTemplate =
      `"<span">no rows to show</span>"`;
  }
}

这里是 demo.

如何在 ag-grid 中以编程方式更改 'no rows to show' 文本？

How can I change 'no rows to show' text programmatically in ag-grid?

overlay

ag-grid

angular