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

Question

场景：

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

快速修复是到

• 将 cdk-virtual-scroll-viewport 的高度设置为 500px 或者设置 class 'example-viewport' 在 app.component.css
中的高度

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

样本在 https://stackblitz.com/edit/angular-efdcyc

Answer 1

添加必要的 CSS 样式以提供元素的高度

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

.example-item {
  height: 50px;
}

您可以在此处查看您提到的示例的全部内容。 https://material.angular.io/cdk/scrolling/overview

他们还使用自定义 CSS 来设置元素的样式。

Updated Slackblitz

Answer 2

• 对视口使用 100% 的 最小高度 并验证
• 确保 '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">

Answer 3

这个 CSS 适合我（不需要固定高度）：

<cdk-virtual-scroll-viewport class="viewport">  
   .......
</cdk-virtual-scroll-viewport>

.viewport { 
   display: contents;
}