web-dev-qa-db-fra.com

Utilisation du défilement virtuel dans Angular Material 2 Table with @ angular / cdk-experimental

J'ai un tableau qui affiche tant de lignes, je veux en optimiser les performances. J'ai trouvé une solution en utilisant la technique Virtual Scroll. Voici un exemple de Angular Material CDK Vritual Scroll Viewport Component avec un simple div que j'ai trouvé:

<cdk-virtual-scroll-viewport class="list-container lg" [itemSize]="52.5">
  <div *cdkVirtualFor="let state of statesObservable | async;" class="list-group-item">
     <div class="state">{{state.name}}</div>
     <div class="capital">{{state.capital}}</div>
  </div>
</cdk-virtual-scroll-viewport>

Cependant, je veux l'intégrer avec Angular Material Table comme ci-dessous

<table mat-table [dataSource]="dataSource">
    <ng-container  *ngFor="let c of displayedColumns" [matColumnDef]="c">
      <th mat-header-cell *matHeaderCellDef>{{getTitle(c)}}</th>
      <td mat-cell style="white-space: pre-wrap;" *matCellDef="let element"> {{element[c]}}</td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
 </table>

Je me demandais comment envelopper ça cdk-virtual-scroll-viewport à mat-table. Ma table affiche jusqu'à 1000 lignes et plus de 20 colonnes, et les performances sont assez lentes pendant le chargement et le défilement.

PS: Je sais que cela peut être résolu en utilisant Paginator , mais je ne veux pas faire ça.

Versions

  1. "@angular/material": "^6.2.0"
  2. @angular/cdk": "^6.2.0"
  3. @angular/cdk-experimental": "^6.2.1"
  4. "@angular/core": "6.0.3"
  5. "@angular/cli": "6.0.7"
angulartypescriptangular-material2angular6angular-cdk
18
Seanghay

Ce n'est pas encore pris en charge. Mais certaines personnes ont essayé de faire des POC. En voici un https://github.com/angular/material2/issues/10122#issuecomment-440442656 .

Également dans ce issue il y a une discussion sur le défilement virtuel et le fonctionnement du POC ci-dessus.

2
piyush gupta

Ce n'est pas quelque chose qui existe actuellement hors de la boîte. Le composant CdkTable (ou MatTable) ne prend pas en charge le défilement virtuel [~ # ~] encore [~ # ~] .

Le support de défilement virtuel intégré dans @angular/cdk est encore dans sa phase expérimentale - cela changera dans la version 7.

Cependant, lorsque cette fonctionnalité arrivera, la prochaine étape sera de l'implémenter pour la table ... et j'expliquerai pourquoi.

cdk-virtual-scroll-viewport est un conteneur pour le *cdkVirtualFor directive, si nous regardons cette directive (CdkVirtualForOf) nous pouvons voir que

1) Il implémente CollectionViewer ( code ) 2) Il accepte (fonctionne avec) DataSource instance ( code )

Dans cet esprit, regardons le CdkTable

1) Il implémente CollectionViewer ( code ) 2) Il accepte (fonctionne avec) DataSource instance ( code )

La similitude n'est pas par hasard, le tableau (avec quelques ajustements) peut être utilisé par cdk-virtual-scroll-viewport comme le cdkVirtualFor est utilisé.

Je ne sais pas quelle sera l'implémentation finale, si le développeur pourra envelopper la table de l'extérieur ou si la table la définira en interne, mais c'est la direction qu'elle sera.

Si je devais deviner, je dirais que le développeur choisira s'il veut envelopper la table avec un défilement virtuel. Ceci est dû au fait cdk-virtual-scroll-viewport ne demande pas cdkVirtualFor (via ViewChild), il est passif et attend quelque chose pour l'attacher ... ce qui est un signe que cela a été pensé à l'avance ...

Vous pouvez le faire dès maintenant, en étendant CdkTable et en faisant vous-même les ajustements, cela nécessitera une compréhension des internes de la table et pourrait prendre un certain temps. Je suggère d'attendre un peu.

5
Shlomi Assaf