web-dev-qa-db-fra.com

défilement virtuel sur Angular 7 n'est pas visible - la hauteur est nulle par défaut

Scénario:

  • J'ai essayé un test de défilement virtuel de base en lisant ceci article de blog
  • le tableau avait beaucoup d'articles
  • il n'y a pas eu d'erreur
  • la liste chargée dans un défilement virtuel mais sa hauteur était de 0 par défaut

la solution rapide était de

  • définissez la hauteur de cdk-virtual-scroll-viewport sur 500px ou définissez la hauteur de la classe 'example-viewport' dans app.component.css

Question : quelle est la bonne façon de surmonter cette hauteur nulle?

échantillon à https://stackblitz.com/edit/angular-efdcyc

angularangular7virtualscroll
6
Akber Iqbal
  • utilisez min-height de 100% pour la fenêtre et vérifiez
  • assurez-vous que la hauteur définie dans la fenêtre avec 'itemSize' correspond à la hauteur de l'élément en css

  • si vous utilisez un Observable, assurez-vous de le résoudre avec * ngIf et le canal asynchrone. Important: l'élément html est un ng-container, car il peut ne pas être rendu pour que la largeur minimale fonctionne!

      .list {
     min-height: 100%;
  }

  .item {
     height: 100px;
  }

Lors de l'utilisation d'un observable comme source

<ng-container *ngIf="obs$ | async; let data">
  <cdk-virtual-scroll-viewport itemSize="100" class="list">
6
dagerber

Ajoutez les styles CSS nécessaires pour fournir la hauteur de l'élément

.example-viewport {
  height: 200px;
  width: 200px;
  border: 1px solid black;
}

.example-item {
  height: 50px;
}

Vous pouvez voir le contenu complet de l'exemple que vous avez mentionné ici. https://material.angular.io/cdk/scrolling/overview

Ils ont également utilisé du CSS personnalisé pour styliser leurs éléments.

Slackblitz mis à jour

2
Pandiyan Cool