html - 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

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