6

私は Angular 7 を使用しており、Angular Material Tableを持つ単純なコンポーネントがあります。マウス クリックなどの何らかのイベントを通じて、その既存のテーブルのデータとヘッダーの両方を更新できるようにしたいと考えています。

前:

ここに画像の説明を入力

後(目標):

ここに画像の説明を入力

現在、データを正常に更新しています。ただし、列のヘッダー テキストを更新することはできません。つまり、かなりおかしなウィンドウ タイムアウト呼び出しを行わない限りです。

これは説明が難しいため、stackblitz リポジトリが役立つはずです。そこにリンクした「table-dynamic-columns.example.ts」ファイルには、「changeColumnHeader」ボタンクリックハンドラーで試す2つの異なる戦略があります。新しい列ヘッダーのタイトルを表示するには、最初にテーブルの表示列をクリアしてから、タイムアウトで適切に戻す必要があるようです。プロパティ名は同じまま (つまり 'id') で、タイトルだけが変更されるため、機能していない可能性があります。

これを正しく更新するためのより良い方法を知っている人はいますか?

4

1 に答える 1