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

【问题标题】：virtual scroll on Angular 7 is not visible - the height is zero by defaultAngular 7 上的虚拟滚动不可见 - 默认情况下高度为零
【发布时间】：2019-03-27 12:02:51
【问题描述】：

场景：

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

快速修复是到

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

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

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

【问题讨论】：

使用height: 100%;，它将获得父母的身高，您可以像处理页面中的任何其他 div 一样处理父母的大小。
@ibenjelloun，行不通...您可以在这里尝试angular-efdcyc.stackblitz.io ...但是我是否缺少一些应该处理它的依赖项？
恕我直言，设置cdk-virtual-scroll-viewport 元素样式的方式完全是任意的，而且是命中注定的。 itemSize 属性完全没有意义，所以你必须使用样式和属性，直到你把它弄对为止。组件的文档和设计就是个笑话。

标签： angular angular7 virtualscroll

【解决方案1】：

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

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

.viewport { 
   display: contents;
}

【讨论】：

欢迎来到 Stack Overflow。在将其粘贴到更多位置之前，请花时间阅读Is it acceptable to add a duplicate answer to several questions?。
非常感谢，你救了我，兄弟

【解决方案2】：

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

【讨论】：

感谢您的回复，100px 的项目高度是任意的......（第二个项目符号）项目的高度可以在响应屏幕尺寸期间发生变化，因此我们无法获得精确匹配；

【解决方案3】：

添加必要的 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

【讨论】：

50px 或 500px 的高度并不准确......它应该与我们在中定义的 itemSize 相关联......但你是对的，这个例子还给了一个固定的高度！！