我们有一个带有 tr td 组合的简单 HTML 表格。该表有 65 列，它至少有 1000 行，而且还可以更多。

当连续选择一个复选框时，我们看到一个巨大的性能问题，选择一个复选框并将其呈现为选中大约需要 3-4 秒。我们使用了Angular CDK virtualScroll，它在很大程度上提高了性能。但我们仍然看到上述问题。

问题的原因是什么？看到这么多记录出现此性能问题是否正常，或者是否存在任何会导致此问题的设计问题？

我正在尝试实现PrimeNG VirtualScroller组件来处理大型数据列表。问题是，当我在模板内放置一个绑定到 [(ngModel)] 上的列表的p-checkbox时，选中复选框，然后滚动列表以加载下一个值，一些下一个值显示已选中也一样，但它们根本没有被点击......

下面是我的代码：

你们有没有遇到过使用 PrimeNG 的 VirtualScroller 的情况？

我相信这确实是 PrimeNG 组件的问题，但也许我在这里做错了......

这是文档的网址：

先感谢您！

带有position:fixed的 HTML 元素在cdk-virtual-scroll-viewport中不起作用。下面的样式应该将元素放在页面的左上角，但是此类不适用于 cdk-virtual-scroll-viewport 内的元素。

.fixed-div {位置：固定；顶部：0；左侧：0；}

出于某种原因，cdk-virtual-scroll-viewport 内的元素的上述类将保持元素在 cdk-virtual-scroll-viewport 的左上角。

复制链接https://stackblitz.com/edit/angular-mvf6dp

如何强制位置：固定在 cdk-virtual-scroll-viewport 中的元素显示相对于视口的位置？

我有一个大数据列表，我想在网格中显示它，但我不想显示整个列表，因为它会在屏幕上显示太多内容并且速度很慢。我想使用虚拟滚动，但我想让标题和第一列保持粘性，所以如果我滚动我总能看到它们。现在，我可以拥有其中一个，但不能同时拥有两者。

到目前为止，我有这个：https ://stackblitz.com/edit/angular-ivy-esodhl?file=src%2Fapp%2Fapp.component.css

起初，我使用的是 angular mat-table，但我遇到了同样的问题。

你有什么解决办法吗？

目前，我正在使用 Microsoft SignalR 对我的数据进行实时更新，每当有新数据进入时，我希望将其添加到现有的虚拟列表中，同时从其所在位置删除该条目。

本质上，您如何通过虚拟滚动取消移动并拼接出该数据条目而无需重新加载列表。

我从后端获取超过 30000 条记录到前端列表，所以使用 cdk-virtual-scroll 我可以实现这一点。我创建了带有 cdk-tag 的普通表

如果我喜欢这样，当我向下滚动时，表格标题也会滚动，如果我喜欢，

header 和 tbody 的宽度略有不同，两者的宽度不同，因为我们仅在下面的 body 中滚动。有人可以帮我解决这个对齐问题吗？

由于我的列表中有大量用户，我正在使用 cdkVirtualFor。该列表对其进行了过滤，并且当它是 cdkVirtualFor 而不是常规的 *ngFor 时，它的效果要好得多。

我现在需要使用将项目添加到列表中

当我使用

新的空项目显示在我的列表顶部。

当我使用

该项目不出现。

我想继续使用 cdkVirtualFor。我怎样才能对底层对象显示进行更改？

使用 CDK 自动调整虚拟滚动策略保持滚动位置

我有大量可以滚动的项目列表<cdk-virtual-scroll-viewport autosize>（@angular/cdk-experimental项目具有动态高度，因此我使用此滚动策略而不是FixedSizeVirtualScrollStrategy）。

随着时间的推移，新项目被插入到列表中，即它们被附加在顶部。当用户向下滚动时，我想避免新项目将视口中的项目推开。因此，我需要一种机制来在添加项目后维持/恢复滚动位置。

我有一个半工作的解决方案（而且很hacky，因为它读取私有字段），但是在添加项目后视口会随机移动几个像素。

以下是相关的代码部分：

我在这里创建了这种方法的演示：https ://stackblitz.com/edit/angular-be926g?file=src/app/cdk-virtual-scroll-overview-example.ts

任何想法如何通过恒定视口无缝实现这一目标？

好的，所以最近我一直在尝试将我的一些表格功能迁移到使用虚拟滚动，仅仅是因为 DOM 被数百个节点同时包含大量数据集而陷入困境。

话虽如此，我只是打算在我的表上使用 Angular Material CDK 虚拟表滚动指令，因为它们无论如何都是垫表。我找到了一些例子，虽然我似乎无法让事情正常工作。

这些是我用来获取信息的来源：

• https://material.angular.io/cdk/scrolling/examples
• https://diprokon.github.io/ng-table-virtual-scroll/#/examples

下面是我在这里使用的表格模板

和实际的打字稿

所以我知道表的数据源需要是一个 TableVirtualScrollDataSource 对象和所有对象，尽管这里的问题是这是一个应该是可变的子表，并且通常基于输入中的数据。许多 Angular Material 示例在类之外制作常量，这在使用 Input 绑定和所有方面都没有帮助，所以我的问题是，在这种情况下，制作 @Input() 的最佳方法是什么数组，但将其数据传递给 TableVirtualScrollDataSource 变量，请记住实际数组可能会因为父级而改变？

目标

显示消息列表并在收到新消息时滚动到底部，即使我在顶部。即使使用不同高度的元素，我也想完全滚动到底部。

问题

使用虚拟滚动，我必须设置[itemSize]属性，但对我来说它不是静态值：

• 当一条消息对于一行来说太长时，它会分成多行，因此它的高度会发生变化。
• 我有不同类型的不同高度的消息（例如系统消息）。

另外，我正在使用ng-content从父级插入一个按钮来加载以前的消息。我看到的是，当_scrollToBottom被调用时，不是把我带到底部，而是把我带到更高的地方。我怀疑这是因为虚拟滚动中元素的高度不同。

我已经从 Angular 阅读了这个 autosize 滚动策略问题：https://github.com/angular/components/issues/10113；但我不确定这会解决我的问题。

任何关于我能做什么的想法都将受到欢迎。

测试

Codesandbox：https ://codesandbox.io/s/angular-virtual-scroll-biwn6

• 加载消息后，向上滚动。
• 发信息。（加载新消息时，虚拟滚动不会滚动到底部，而是会停止更高一点）
• 重复

有错误的视频：https ://gofile.io/d/8NG9HD

解决方案

Gourav Garg给出的解决方案有效。只需执行两次滚动功能。

我现在正在这样做：

我认为它不是很优雅，但效果很好。