webentwicklung-frage-antwort-db.com.de

virtueller Bildlauf auf Angular 7 ist nicht sichtbar - die Höhe ist standardmäßig Null

Szenario:

  • Versuchte einen einfachen virtuellen Scroll-Test dies zu lesen Blog-Beitrag
  • das Array hatte viele Gegenstände
  • es gab keinen Fehler
  • die Liste wurde in einem virtuellen Bildlauf geladen, aber die Höhe war standardmäßig 0

Schnellkorrektur war zu

  • setzen Sie die Höhe für cdk-virtual-scroll-viewport auf 500px oder setzen Sie die Höhe für die Klasse 'example-viewport' in app.component.css

Frage : Was ist der richtige Weg, um diese Nullhöhe zu überwinden?

beispiel unter https://stackblitz.com/edit/angular-efdcyc

angularangular7virtualscroll
6
Akber Iqbal
  • verwenden Sie min-height von 100% für das Ansichtsfenster und überprüfen Sie
  • stellen Sie sicher, dass die im Ansichtsfenster mit 'itemSize' festgelegte Höhe mit der Höhe des Elements in CSS übereinstimmt

  • wenn Sie eine Observable verwenden, müssen Sie sie mit * ngIf und der asynchronen Pipe auflösen. Wichtig: Das HTML-Element ist ein ng-container, da es möglicherweise nicht gerendert wird, damit die min-width funktioniert!

      .list {
     min-height: 100%;
  }

  .item {
     height: 100px;
  }

Bei Verwendung eines Observable als Quelle

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

Fügen Sie die erforderlichen CSS-Stile hinzu, um die Höhe des Elements anzugeben

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

.example-item {
  height: 50px;
}

Sie können den vollständigen Inhalt des Beispiels sehen, das Sie hier erwähnt haben. https://material.angular.io/cdk/scrolling/overview

Sie verwendeten auch benutzerdefiniertes CSS, um ihre Elemente zu gestalten.

aktualisiertes Slackblitz

2
Pandiyan Cool