CDK 虚拟卷轴没有 dom

Question

我正在使用 CDK 虚拟滚动来提高包含大量数据的下拉菜单的性能。我已按照文档执行了所有步骤。但是当我打开下拉菜单时，我在 cdk-virtual-scroll-viewport 组件中看不到任何 dom。

这是来自 HTML 的代码。

<cdk-virtual-scroll-viewport itemSize="500" class="example-viewport">
            <div *cdkVirtualFor="let item of items" class="example-item">{{item.name}}</div>
        </cdk-virtual-scroll-viewport>

如果我将 div 移到 cdk 虚拟滚动之外并用 ngFor 替换它，它工作正常。知道可能是什么问题吗？

Answer 1

这是因为您的 itemSize 对于容器高度而言太大了。

虚拟滚动使用itemSize 来计算适合您视口的项目数。

您将 500px 设置为每个项目的大小，即整个 cdk-virtual-scroll-viewport 容器的大小。尝试设置一个较小的itemSize。

另外，这是我制作的虚拟滚动示例（它可能会对您有所帮助）：https://codesandbox.io/s/angular-virtual-scroll-biwn6

Answer 2

问题是滚动模块没有导入正确的模块文件中。它没有给出任何错误，只是给出了一个警告。