angular - 如何在Ag-Grid中以编程方式更改“无行可显示”文本？

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

最佳答案

如documentation所述，可以通过同时使用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的新属性，该属性在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。