cdk-virtual-scroll-viewport 渲染所有元素

Question

我正在使用 cdk-virtual-scroll-viewport 渲染一个列表，但它渲染所有元素就像一个经典的 ngFor

  <cdk-virtual-scroll-viewport itemSize="16">
    <div *cdkVirtualFor="let i of nums" style="color: aliceblue;">
        {{ i }}
    </div>
  </cdk-virtual-scroll-viewport>

Answer 1

您是否尝试设置视口的高度来指示一次显示的元素数量？

在 html 中 - 向视口元素添加一个类：

<cdk-virtual-scroll-viewport itemSize="16" class="viewport">

在css中：

.viewport {
    height: 48px; /* shows 3 elements at a time */
}