问题标签 [angular-cdk-virtual-scroll]

尝试在 PrimeNG 的表格组件上组合虚拟滚动和过滤功能时，我遇到了我认为是错误的错误。

在启用并尝试过滤这两个功能的情况下，渲染的数据不会被过滤掉，但我已经设法通过被调用的primeng过滤器函数进行调试，并且可以看到底层确实被过滤了，我怀疑这是什么更多与内部如何以某种方式使用 CDK 虚拟滚动条实例有关。

可复制的演示- https://stackblitz.com/edit/primeng9-table-virtualscroll-with-filtering?file=src/app/app.component.html

使用上面的 url，只需按返回的任何数据列进行过滤，例如品牌名称。

第一个演示使用虚拟滚动，并且请在过滤时观察控制台输出，因为我在这里捕获 onFilter 表事件的结果并计算输入过滤搜索词的匹配过滤记录的长度。您将看到结果如何被清楚地匹配和返回，但表中的行永远不会相应地过滤，始终显示原始呈现的行。

为了进一步证明我的怀疑，我认为在某种程度上是primeNG中使用CDK虚拟滚动条的错误，您可以在stackblitz演示中删除以下两个表格属性：

[virtualScroll]="true" [virtualRowHeight]="34"

删除这些并禁用虚拟滚动后，过滤功能将按预期运行，仅在表中显示匹配结果，但当然它会失去启用虚拟滚动的性能优势。

所以我的问题是，我怎么能在这里两者兼得？

顺便说一句 - 是的，我使用的是 PrimeNG 9，而 10 是最新的，但由于各种原因，我正在进行的项目仍在 9 上，并且会持续一段时间，所以我正在寻找 v9 修复\解决方法，如果可能的话。

谢谢你的时间！

我正在使用PrimeNG启用了自定义过滤和虚拟滚动的下拉组件。

我发现该组件在重新打开时不会滚动回视图中的项目列表中的最后一个选择，而是它只是滚动回列表顶部，这意味着您必须物理滚动才能找到所做的选择.

请参阅此示例stackblitz

我确实在这里遇到了一个解决方案，它谈到了调用scrollToIndexCdkVirtualScrollViewport 实例，听起来它可能对我有用。但是当我试图将它合并到我的代码中时，我的实例变量出现为未定义。

有谁知道这里的正确方法是什么？我正在使用 PrimeNG 7.1.3。

谢谢

我有一个包含许多项目的列表，每个项目都可以选择。为此，我使用 Angular Material Virtual Scroll。当一个项目被选中时，被选中的项目被高亮显示，然后被保存在服务器上。当我刷新页面时，所选项目来自服务器并再次突出显示。

我的代码看起来像

问题是，如果选择列表中的一个项目，它会突出显示，但我必须向下滚动到列表才能看到它。当该项目来自服务器时，我想以编程方式向下滚动到它。

我的文档有一种scrollToIndex方法。我在哪里可以找到 的实例FixedSizeVirtualScrollStrategy，所以我可以调用这个方法？

我想在我的 Angular 应用程序上使用虚拟滚动。我列表中的项目是远程分页搜索的结果。每次向下滚动到视口的末尾时，我都想加载更多结果（调用下一页）。

这是我的模板：

这是我尝试使其按需要工作的尝试：

如您所见，我不知道如何触发对我的呼叫nextSearchPage如您所见，仅当滚动条到达列表中当前呈现项目的末尾时，

你知道我该怎么做吗？

Angular 滚动文档很差，并且缺少示例，如本期所述。

我正在寻找一个带有固定标题的工作虚拟滚动表，所以我发现 Cdk 很棒，但文档真的很难理解。目前我正在尝试将 with 结合CdkTable起来CdkVirtualScoll。

我能找到的所有工作示例都使用材料表，但我没有。

那我怎么CdkVirtualScoll去上班呢？这是我到目前为止所做的（来自示例）：

正如文档中所写的那样，表格被包装到滚动视口中。但是我如何以及在哪里设置*cdkVirtualFor现在？

谢谢你的帮助！

我很难计算所有元素。它一次只显示 11 个元素。向下滚动时，第一个元素被下一个元素替换。

这就是我所拥有的：

我注意到当我将 cdk 虚拟滚动的 itemSize 设置为较低的量时，页面的加载时间几乎是该量的两倍。

<cdk-virtual-scroll-viewport [itemSize]="45"和<cdk-virtual-scroll-viewport [itemSize]="20"（有 2k 行的表）之间有很大的不同。

我的问题是为什么页面的加载时间从 2 秒到近 5 秒？怎么会有这么大的不同？

需要知道是否可以在像 ng-bootstrap 的特定手风琴中使用这个新功能 @angular/cdk/scrolling（在 mat-accordion 中它是https://stackblitz.com/edit/virtual-scroll-expansion-panels？文件=app%2Fapp.component.ts )

https://stackblitz.com/edit/angular-ahzm1v?file=app%2Faccordion-basic.ts

我试图通过虚拟滚动组件加载 20 个项目，但我在页面加载后立即看到 34 个项目，根本没有进行任何滚动。我的css错了吗？还是我忘记了控件上的某些设置？该项目位于此处。

我们最近将可滚动列表转换为 CDK Virtual Scroller。（Angular 7.2.12 与 angular/cdk 7.3.7）

简而言之，似乎是在VirtualScrollViewport回收组件实例，而不仅仅是文档建议的模板。

StackBlitz 上的实时 MCVE（更新以反映 EDIT 1）。

编辑 1

一位同事提醒我，我们现在使用命名引用而不是ViewChildren()，如下所示：

HelloComponent（内部*cdkVirtualFor）：

并在应用程序中实现它，例如：

它将被点击元素的背景颜色更改为红色，但是在滚动时，其他元素（可能与某些缓存索引匹配的元素？）已经是红色了！激活其中一个也将清​​除原始文件。

消息来源暗示这templateCacheSize可能会有所帮助，但它没有。

原来的

可滚动区域包含我们使用 a 引用的组件，@ViewChildren()并且我们使用(now )QueryList中的索引跟踪我们正在操作的组件，如下所示：*ngFor*cdkVirtualFor

然后，从页面中，我们与列表中的组件进行通信：

当然，既然模板是在虚拟滚动容器中渲染的，那么只有第一个n渲染到 DOM 中。因此，如果您向下滚动列表超出最初加载的内容，hiRefs不包含对具有相应索引的项目的引用，则会ReferenceError为提供的["_results"][i].

我尝试了trackBy但没有得到任何成果。

编辑：一位同事也试图传递一个命名引用，奇怪的是它也有同样的问题。

更新HelloComponent至

并在应用程序中实现它，例如：

它将被点击元素的背景颜色更改为红色，但在滚动时，其他元素（可能与相同索引匹配的元素）将已经是红色，尽管根本没有使用 @ViewChildren() QueryList！

似乎CDK正在回收组件实例引用？

我用 方法更新了 StackBlitz clickByReference()，并将上面的重命名为clickByIndex().

如何正确获取对列表中组件的引用以便对其调用方法？