Angular 6 MatTable Performance sur 1000 lignes.

Question

J'utilise angular dans mon projet et j'utilise Mat-Table pour rendre 1000 produits/ligne par table. Lorsque vous changez la pagination (nous utilisons la pagination principale) du tableau en 1000 lignes, le les performances deviennent très lentes, je ne peux même pas écrire dans les zones de texte.

J'ai essayé de déboguer le problème, j'ai donc mis les journaux sur un modèle de colonne afin de voir comment fonctionne le rendu.

Je vois que c'est de rendre toutes les lignes, même si je survole les en-têtes du tableau. Y a-t-il des possibilités de contrôler la détection de changement pour être comme ChangeDetectionStrategy.OnPush

Answer 1

J'avais résolu ce problème et j'ai amélioré les performances en enveloppant la table dans un composant personnalisé (grille) et en contrôlant le changeDetection du composant pour qu'il soit ChangeDetectionStrategy.OnPush Et quand je veux rendre la mise à jour, j'ai utilisé ChangeDetectorRef.detectChanges()

Answer 2

Je ne sais pas si cela aidera votre situation car il n'y a pas de code mais nous avons constaté que MatTable se charge très lentement si un grand ensemble de données est défini avant vous définissez le paginateur de source de données.

Par exemple, le rendu prend plusieurs secondes ...

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;
}

... mais c'est rapide

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];
}

Soit dit en passant, nous ne trouvions ce problème que la deuxième fois que nous accédions au composant, car le grand ensemble de données du serveur était mis en cache et était immédiatement disponible au deuxième accès au composant. Une autre option consiste à ajouter .delay (100) à votre observable si vous souhaitez laisser ce code dans la fonction ngOnInit.

Quoi qu'il en soit, cela peut ou non aider votre situation.

Answer 3

J'ai trouvé que les paginator et sort ne fonctionnaient pas toujours.

Ce qui a fonctionné pour moi avec plus de 2000 lignes était:

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

Souper rapide, de 10 + sec à 2sec: 0

Answer 4

Introduisez la pagination. C'est le seul moyen de résoudre le problème de performances dans la table de tapis.

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