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

Question

设想：

• 尝试阅读此博客文章的基本虚拟滚动测试
• 数组有很多项目
• 没有错误
• 列表加载在虚拟滚动中，但默认高度为 0

快速修复是

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

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

https://stackblitz.com/edit/angular-efdcyc上的示例

Answer 1

• 对视口使用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">

Answer 2

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

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

.example-item {
  height: 50px;
}

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

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

更新了 Slackblitz

Answer 3

这个 CSS 对我有用（不需要固定高度）：

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

.viewport { 
   display: contents;
}