角度7上的虚拟滚动-默认高度为零

• 使用 最小高度 对于视窗和验证
• 确保在具有“itemsize”的视口上设置的高度与 css中的项

• 如果您使用的是observate,请确保使用*ngif和异步管道解析它。重要: html元素是 天然气容器 ,因为它可能不会 以最小宽度渲染!

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

当使用一个可观测的数据源时

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

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