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

Question

场景：

• 尝试了一个基本的虚拟滚动测试，阅读了此blog post
• 数组中有很多项目
• 没有错误
• 列表已加载到虚拟滚动中，但默认情况下其高度为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 ，因为它可能不是 呈现最小宽度才能正常工作！

  sudo service docker restart
  

使用Observable作为来源时

  .list {
     min-height: 100%;
  }

  .item {
     height: 100px;
  }

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设置元素样式。

Updated Slackblitz

Answer 3

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

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

.viewport { 
   display: contents;
}