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

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

这可以通过与overlayLoadingTemplate and overlayNoRowsTemplate输入绑定属性，如上所述文档 https://www.ag-grid.com/javascript-grid-overlays/#custom-templates.

在您的 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>"`;
  }
}

这里是demo https://next.plnkr.co/edit/BEJfOcosh4ZUHKgQ.