web-dev-qa-db-fra.com

Comment faire défiler par programme jusqu'à l'élément avec un défilement virtuel de matériau angulaire?

J'ai une liste qui contient de nombreux éléments et chaque élément peut être sélectionné. Pour cela, j'utilise Angular Material Virtual Scroll. Lorsqu'un élément est sélectionné, l'élément sélectionné est mis en surbrillance puis enregistré sur le serveur. Lorsque je rafraîchis la page, l'élément sélectionné provient du serveur et est à nouveau mis en évidence.

Mon code ressemble

<cdk-virtual-scroll-viewport itemSize="40" class="wrapper">
  <div *cdkVirtualFor="let item of list"
       [class.selected]="item.id === selectedItem.id">
  </div>
</cdk-virtual-scroll-viewport>

Le problème est que si un élément sélectionné dans la liste est sélectionné, il est mis en surbrillance, mais je dois faire défiler la liste pour le voir. Je veux faire défiler par programme vers le bas lorsque cet élément provient du serveur.

Dans le docs il existe une méthode scrollToIndex. Où puis-je trouver une instance de FixedSizeVirtualScrollStrategy, donc je peux appeler cette méthode?

angularangular-materialangular-cdkvirtualscrollangular-cdk-virtual-scroll
11
MTZ

Bien sûr, vous devrez obtenir une référence à l'instance CdkVirtualScrollViewport.

@ViewChild(CdkVirtualScrollViewport) viewPort: CdkVirtualScrollViewport;

scrollToMiddle(){
  this.viewPort.scrollToIndex(list.length/2, "smooth");
}

Un exemple peut être trouvé dans ce stackblitz

Pour l'exigence de faire défiler jusqu'à l'index de l'élément sélectionné dans la liste, vous pouvez effectuer les opérations suivantes:

ngAfterViewInit(){
  const selectedIndex = this.list.findIndex(elem => elem.id === this.selectedItem.id);
   if(selectedIndex > -1){
     this.viewPort.scrollToIndex(selectedIndex);
   }
}

Remarque: cela suppose que la liste est déjà chargée pendant le ngAfterViewInit lifehook. Comme vous n'avez pas fourni plus d'informations sur la façon dont la valeur de liste est définie, c'est le meilleur que je puisse fournir.

13
Jota.Toledo