Как я могу изменить текст «нет строк для отображения» программно в ag-grid?

Question

Я недавно возился с Ag-сеткой.Я хочу изменить текст «нет строк для отображения» на «данные загружаются ...», когда я получаю некоторые данные из REST API.Данные возвращаются в виде массива объектов 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>"`;
  }
}

Здесь находится demo .