web-dev-qa-db-ja.com

Angular Material TableでrenderRows（）を呼び出す

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

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

インポートして@ViewChild（ 'myTable'）myTable：MatTableModule;のようなものを試してみると次に、そのタイプにrenderRows（）が存在しないというエラーが表示されます。

このメソッドを呼び出すにはどうすればよいですか？ありがとう！

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

<mat-table #table [dataSource]="dataSource" myTable class="dataTable">
angularmethodsangular-materialviewchild
16
gv0000

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

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

その後、ViewChildを使用してテーブルへの参照を取得できます（MatTableにはタイプTが必要です-任意に使用しましたが、型付きテーブルがある場合は、そのタイプを使用する必要があります。

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

その後、何らかの方法でテーブルを変更する場合、renderRows（）メソッドを呼び出す必要があります。

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

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

この問題を自分で解決するときに見つけたいくつかのソース：

47
Brad Lawrence

@ViewChild('myTable') myTable: MatTableModule

文字列を照会することは想定されていません。これは、参照を照会します（<cmp #ref>）。また、タイプが間違っています。ビューからモジュールを取得するのではなく、コンポーネントを取得するのです。

クエリするコンポーネントをインポートして、次の操作を実行する必要があります（クエリする必要があるコンポーネントに応じて変更します）。

@ViewChild(MatTable) matTable: MatTable

ViewChildデコレータの引数はクエリするコンポーネントであり、型は便宜上のものです。これを省略するか、anyと言うこともできますが、ヘルプはありません。 TypeScriptを使用しない場合は、そのままにしておくことをお勧めします。

1
Lazar Ljubenović