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

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

Answer 2

发生这种情况是因为您的 itemSize 对于容器高度来说太大了。

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

您将每个项目的大小设置为 500 像素，这是整个 cdk-virtual-scroll-viewport 容器的大小。尝试设置较小的 itemSize.

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

CDK虚拟卷轴没有dom

CDK virtual scroll has no doms

html

angular

angular-material

angular-cdk

angular-cdk-virtual-scroll