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

Question

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

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。