Angular Material テーブルで renderRows() を呼び出す 質問する

Angular Material テーブルで renderRows() を呼び出す 質問する

テーブルで使用されているデータを更新した後、Angular テーブルを更新しようとしています。

ドキュメントには、「renderRows() メソッドを呼び出すことで、テーブルのレンダリングされた行の更新をトリガーできます」と書かれていますが、これはインポートしていないため、「@ViewChild(MatSort) sort: MatSort;」のようなものを使用できる通常の子コンポーネントとは異なります。

実際にインポートして、@ViewChild('myTable') myTable: MatTableModule; のようなものを試してみると、renderRows() がその型に存在しないというエラーが表示されます。

このメソッドを呼び出すにはどうすればよいですか? ありがとうございます!

私のテーブルコードスニペット:

<mat-table #table [dataSource]="dataSource" myTable class="dataTable">

ベストアンサー1

ViewChild と MatTable を必ずインポートしてください。

import {Component, ViewChild} from '@angular/core';
import {MatTable} from '@angular/material';

次に、ViewChild を使用してテーブルへの参照を取得できます (MatTable には型 T が必要であることに注意してください - ここでは any を使用しましたが、型指定されたテーブルがある場合はその型を使用する必要があります)。

@ViewChild(MatTable) table: MatTable<any>;

その後、テーブルを何らかの方法で変更するときに、renderRows() メソッドを呼び出す必要があります。

delete(row: any): void {
  /* delete logic here */
  this.table.renderRows();
}

以下に非常に簡単な動作例を示します。https://stackblitz.com/edit/angular-bxrahf

私がこの問題を自分で解決する際に見つけた情報源をいくつか紹介します。

おすすめ記事