我的页面由 *ngFor 指令创建的几个ng-select（自定义服务器端搜索）下拉列表组成，可以从每个下拉列表中选择多个项目。

我还想包含虚拟滚动功能，但我不知道如何发出另一个服务器请求并更新filterValues$值以包含新数据。

组件.html

组件.ts

任何帮助，将不胜感激！

使用更新的代码进行编辑：我设法实现了虚拟滚动功能，但是每当我进入下拉列表的底部时，它都会触发该fetchMore()方法并重置this.filterValues$[filterName]值，从而将下拉列表从底部移动到顶部。我怎样才能防止这种情况？

我cdk-virtual-scroll-viewport用来应用虚拟滚动。不幸的是，在将样式应用到滚动条后，滚动不再流畅。原生（右侧）滚动条闪烁，但移动得更顺畅。在 Chrome 上测试。

https://stackblitz.com/edit/angular-jkw9ac-dpnnaw

我在Cordova应用程序中使用 JS 构建了一个虚拟滚动列表，我想在每次滚动后保存位于视口顶部的确切节点。虚拟滚动的复杂之处在于使用scrollTop不可靠，因为节点正在从列表的顶部和底部删除，这会改变滚动位置。在 Javascript 中是否有可靠且高效的方法来执行此操作？用例是这样的：当用户关闭并重新打开应用程序时，我想将用户放置在相同的滚动位置，并确保该位置的元素是用户在关闭应用程序之前最后一次看到的元素。我正在考虑这个策略：

• 获取每个滚动列表顶部的元素，如下所示：

• 保存该元素的标识符，以便我可以在应用程序初始化时预加载列表，以便该元素始终呈现在该位置

我想知道是否有其他策略可以在基于 JS 的虚拟滚动器中处理此问题。我已经看过用 Javascript 构建虚拟滚动条的教程，但还没有看到提供有关如何解决这个问题的实现细节的教程。提前致谢！

更新 1

虚拟滚动列表有很多节点，可以有100多个，每个都有自己的子节点。这会导致其自身的一系列问题，因此重要的是（在可能的情况下）该解决方案不需要遍历节点列表或在每个节点上执行昂贵的操作，以避免阻塞主线程。

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

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

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

你有什么解决办法吗？

我有一个带有垂直虚拟滚动的侧边栏。每当我将鼠标悬停在此滚动容器中的某个项目上时，就会出现一个弹出框，提供有关该项目的更多信息（例如，在容器中，名称被省略，因为容器不够宽，并且当用户将鼠标悬停在该项目上时，弹出框是以全名显示）。当我使用 ngx-virtual-scroller 时，弹出框会导致出现水平滚动条，并且弹出框被虚拟滚动条剪辑。

当我在一个普通的滚动容器中尝试这个时，这不会发生。

进一步调查表明，这与虚拟滚动条的相对定位有关，但我找不到解决方案……

你知道克服这个问题的方法吗？

虚拟滚动条的问题

预期结果（与普通滚动容器一样）

目标

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

问题

使用虚拟滚动，我必须设置[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给出的解决方案有效。只需执行两次滚动功能。

我现在正在这样做：

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

使用 Angular CDK 虚拟滚动渲染巨大列表时遇到问题。需要将 itemsize 设置为 1 才能正确加载列表。

预计根据视口大小加载列表。但它的负载远远超过视口大小。视口大小为 20 个项目，它将一次加载超过 200 个项目。

例子：

https://ionic-angular-v5-virtual-scroll-issue-cdk.stackblitz.io

该代码使用 Ionic 5 + Angular。不使用 Ion-virtual-scroll 的原因是参考了团队的建议。 https://github.com/ionic-team/ionic-framework/issues/22792

我正在尝试创建一个基于角度材料选择组件（v10）的自定义多选组件，该组件具有虚拟滚动和组件覆盖内的自定义搜索输入。我还添加了一个mat-select-trigger元素来显示所选项目的数量，而不是默认的所选项目列表。

这个stackblitz中提供了（几乎完全工作且没有样式）示例。

我遇到的问题与所选项目的显示值有关。

要复制该问题，您必须：

1. 在项目列表中搜索（例如：）55并选择一个选项（例如item-55）
2. 单击覆盖层外部以将其关闭
3. 正如预期的那样，组件将显示1 selected，并且该项目将列在下面的Selected items列表中
4. 重新打开列表，单击搜索字段clear按钮，然后单击覆盖层外部，再次将其关闭

该组件现在将显示Items占位符，当它应该显示时1 selected，因为该项目仍在Selected items列表中（并且它是在mat-select-trigger元素中使用的这个列表）。

尽管如此，如果您重新打开列表并滚动到所选项目 ( item-55)，它将被选中。如果您随后在覆盖层外部单击以再次将其关闭，则会显示正确的值 ( 1 selected)。

我知道这是与虚拟滚动相关的问题，但我一直无法找到解决方案或解决方法。

任何建议将不胜感激！

我无法将 cdk-virtual-scroll-viewport 与我的 Angular html 中的数据绑定。

这是我的jobLists数组中的数据，它在 ngOnInit 中分配有响应数据

在我的 html 类中，我有这样的示例

我已经导入了

在我的 appmodule.ts

我检查了 project.json CDK 已经存在。

当我尝试使用正常 *ngFor 显示值时，显示没有任何问题。

我还需要在这项工作中添加什么吗？

更新

当我尝试简单地显示带有 10000 的数字时，它会正确显示。所以它看起来像绑定值的问题。知道我的价值有什么问题吗？

更新 2

我认为它与 [itemSize]="100" style="height: 900px;overflow-y:auto;" 有一些作用 现在它来了，我修改了我的 .ts

工作显示：任何；像这样贴花并分配

this.jobToDisplay = this.jobLists;

现在它的绑定b但是当我触摸高度属性时它不会绑定..

我有一个包含大约 1000 列的材料表，我想虚拟化这些列，有很多示例显示使用 cdk-virtual-scroll 对行进行虚拟化，但不适用于列。有没有办法对列进行虚拟化。