angular - Angular 7 上的虚拟滚动不可见 - 默认情况下高度为零

Question

场景:

• 尝试了一个基本的虚拟滚动测试来阅读这篇 blog post
• 数组有很多项
• 没有错误
• 在虚拟滚动中加载的列表，但其高度默认为 0

快速修复是到

• 将 cdk-virtual-scroll-viewport 的高度设置为 500px 或者设置app.component.css 中“example-viewport”类的高度

问题:克服这个零高度的正确方法是什么？

sample 在 https://stackblitz.com/edit/angular-efdcyc

Answer 1

• 为视口(viewport)使用 100% 的 min-height 并验证
• 确保在视口(viewport)上使用“itemSize”设置的高度与css 中的项目

• 如果您正在使用 Observable，请确保使用 *ngIf 和异步管道解析它。重要的:html 元素是一个 ng-container，因为它可能不是为最小宽度工作而渲染!

    .list {
       min-height: 100%;
    }
  
    .item {
       height: 100px;
    }
  

当使用 Observable 作为源时

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