web-dev-qa-db-fra.com

Problème de défilement virtuel Cdk

Quelqu'un at-il rencontré le problème de angular 7 cdk défilement virtuel fonctionnant anormalement dans le groupe mat-tab.

https://github.com/angular/material2/issues/13981

Mon modèle de composant de ville ressemble à ça

<cdk-virtual-scroll-viewport class="list-container" [itemSize]="50" minBufferPx="200" maxBufferPx="400" (scrolledIndexChange)="getNextBatch($event)">
  <div *cdkVirtualFor="let state of statesObservable | async; trackBy: trackByFn" class="list-group-item state-item">
    <div class="state">{{state.name}}</div>
    <div class="capital">{{state.capital}}</div>
  </div>
</cdk-virtual-scroll-viewport>

Lorsque vous placez ce composant de ville dans le groupe d'onglets de tapis comme deuxième onglet

<mat-tab-group>
  <mat-tab label="Country">
    <app-country></app-country>
  </mat-tab>
  <mat-tab label="City">
    <app-city></app-city>
  </mat-tab>
</mat-tab-group>

Le résultat ressemble à bel enter image description here ow:

Le code stackblitz est ici: https://stackblitz.com/edit/angular7-virtual-scroll-issue

Quelqu'un at-il une idée de ce problème?

angularangular7angular-cdk
6
rodent_la

Vous devez paresseusement charger le contenu de l'onglet en déclarant le corps dans un ng-template avec l'attribut matTabContent. De cette façon, la taille de la fenêtre n'est calculée que lorsque l'onglet est affiché.

  <mat-tab label="City">
    <ng-template matTabContent>
      <app-city></app-city>
    </ng-template>
  </mat-tab>

Voir: https://material.angular.io/components/tabs/overview#lazy-loading

1
Liviu

La question a été posée il y a quelque temps, mais il existe une solution qui n'est pas une solution de contournement.

Vous avez d'abord besoin de la référence de fenêtre:

@ViewChild(CdkVirtualScrollViewport, {static: false}) cdkVirtualScrollViewport: CdkVirtualScrollViewport;

Vous pouvez ensuite appeler la méthode checkViewportSize() lorsque la taille de la fenêtre d'affichage a changé. Avant d'appeler cette méthode, vous devez mettre à jour la hauteur de style du conteneur Viewport.

this.heightChange$.subscribe(() => {
    this.cdkVirtualScrollViewport.checkViewportSize();
});
0
Simon Steinbeisser

Fonctionne pour moi, merci!

  @ViewChild(CdkVirtualScrollViewport) viewport: CdkVirtualScrollViewport;

  @HostListener('window:resize', ['$event'])
  onResize(event) {
    this.viewport.checkViewportSize();
  }
0
Aleksandr Skobeltcyn