web-dev-qa-db-ja.com

仮想スクロールAngular 7は表示されません-デフォルトでは高さはゼロです

シナリオ：

  • これを読んで基本的な仮想スクロールテストを試しました ブログ投稿
  • 配列には多くのアイテムがありました
  • エラーはありませんでした
  • リストは仮想スクロールで読み込まれましたが、デフォルトでは高さは0でした

クイックフィックスwasに

  • cdk-virtual-scroll-viewportの高さを500pxに設定するか、app.component.cssのクラス「example-viewport」の高さを設定します

質問：このゼロの高さを克服する適切な方法は何ですか？

https://stackblitz.com/edit/angular-efdcyc のサンプル

angularangular7virtualscroll
6
Akber Iqbal
  • ビューポートにmin-height 100％を使用して確認
  • 'itemSize'でビューポートに設定された高さが、cssのアイテムの高さと一致することを確認してください

  • observableを使用している場合は、* ngIfと非同期パイプを使用して解決してください。重要：html要素はng-containerです。これは、min-widthが機能するためにレンダリングされない可能性があるためです！

      .list {
     min-height: 100%;
  }

  .item {
     height: 100px;
  }

Observableをソースとして使用する場合

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

必要なCSSスタイルを追加して、要素の高さを提供します

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

.example-item {
  height: 50px;
}

ここで言及した例の全内容を見ることができます。 https://material.angular.io/cdk/scrolling/overview

また、カスタムCSSを使用して要素をスタイルしました。

更新されたSlackblitz

2
Pandiyan Cool