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

【问题标题】：How can I change 'no rows to show' text programmatically in ag-grid?如何在 ag-grid 中以编程方式更改“无行显示”文本？
【发布时间】：2019-09-08 10:00:06
【问题描述】：

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

【问题讨论】：

显示代码..

标签： angular overlay ag-grid

【解决方案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。

【讨论】：

第一个跨度后无需加双引号："<span">no rows to show</span>"，外层"<span>no rows to show</span>" 有效。
我也根本不需要包含<span>，只需要一个字符串即可。