[解決済み] ag-gridで「表示する行がありません」テキストをプログラムで変更するにはどうすればよいですか？

質問

最近、Ag-gridをいじっています。表示する行がありません」というテキストを「データをロード中です」に変更したいです。REST APIからデータをフェッチしているときです。データは、JSONオブジェクトの配列の形で返されています。しかし、APIが空の配列を返した場合、私は'Data is loading...'テキストを'no rows to show'テキストに変更したいのですが、どうすればこれを達成できますか？ 事前にありがとうございました。

解決方法は？

の両方と連携することで実現できます。 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上で、no rowsのテンプレートを設定します。まず、新しいプロパティを定義します。 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>"`;
  }
}

以下は デモ .