如何在 ag-grid 中以编程方式更改“无行显示”文本？

Question

我最近一直在修补 Ag-grid 。当我从 REST API 获取一些数据时，我想将 'no rows to show' 文本更改为 'data is loading...' 。数据以 JSON 对象数组的形式返回。但是，如果当 API 确实返回一个空数组时，我希望“数据正在加载...”文本更改为“无行显示”文本。我怎样才能做到这一点？提前致谢。

Answer 1

这可以通过使用overlayLoadingTemplate和overlayNoRowsTemplate输入绑定属性来完成，如文档中所述。

在您的 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，它被分配给overlayNoRowsTemplate了 html。然后，将表示自定义消息的 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>"`;
  }
}

这是演示。