web-dev-qa-db-ja.com

Angular 6行で1000 MatTableのパフォーマンス。

私はプロジェクトでangularマテリアルを使用しており、Mat-Tableを使用してテーブルごとに1000 Product/rowをレンダリングしています。パフォーマンスが非常に遅くなり、テキストボックスに書き込むことさえできません。

問題をデバッグして、ログを1つの列テンプレートに配置して、レンダリングの動作を確認できるようにしました。

テーブルヘッダーにカーソルを合わせても、すべての行がレンダリングされます。 ChangeDetectionStrategy.OnPushのように変更検出を制御する可能性はありますか

enter image description here

angularangular-materialangular-material2angular-cdk
13
mostafa cs

この問題を解決し、カスタム（グリッド）コンポーネントでテーブルをラップし、コンポーネントのchangeDetectionをChangeDetectionStrategy.OnPushに制御し、更新をレンダリングするときにChangeDetectorRef.detectChanges()

2
mostafa cs

コードがないのでこれがあなたの状況に役立つかどうかはわかりませんが、大きなデータセットが設定されている場合、MatTableのロードが非常に遅いことがわかりましたbefore datasource paginatorを設定します。

たとえば、これにはレンダリングに数秒かかります...

dataSource: MatTableDataSource<LocationItem> = new MatTableDataSource();
@ViewChild(MatSort) sort: MatSort;
@ViewChild(MatPaginator) paginator: MatPaginator;

ngOnInit() {
  this.dataSource.data = [GetLargeDataSet];
}

ngAfterViewInit() {
  this.dataSource.sort = this.sort;
  this.dataSource.paginator = this.paginator;
}

...しかしこれは速い

ngOnInit() {
  // data loaded after view init 
}

ngAfterViewInit() {
  this.dataSource.sort = this.sort;
  this.dataSource.paginator = this.paginator;

  /* now it's okay to set large data source... */
  this.dataSource.data = [GetLargeDataSet];
}

ちなみに、サーバーからの大規模なデータセットがキャッシュされ、コンポーネントに2回目にアクセスするとすぐに利用可能になったため、コンポーネントに2回目にアクセスしたときにのみこの問題が見つかりました。別のオプションは、ngOnInit関数にそのコードを残したい場合、.delay（100）をオブザーバブルに追加することです。

とにかく、これはあなたの状況に役立つかもしれませんし、そうでないかもしれません。

25
Turneye

paginatorとsortが時々動作しないことがわかりました。

2000行以上で私にとってうまくいったのは：

 ngAfterViewInit() {
      setTimeout(() => {
          this.getLargeDataSet.subscribe(largeDataSet => {
              this.dataSource.paginator = this.paginator;
              this.dataSource.sort = this.sort;
              this.dataSource.data = largeDataSet;
          });
      });
 }

夕食は速い、10秒以上から2秒まで：0

1
jabu.hlong

ページネーションを導入します。それがマットテーブルのパフォーマンスの問題を解決する唯一の方法です。

https://material.angular.io/components/table/overview#pagination

0
Ε Г И І И О