使用 CdkVirtualFor 和 templateCacheSize 进行排序

Question

我已经在 Angular 中的列表中实现了 CdkVirtualForOf，并将其 templateCacheSize 设置为 150 以提高性能。

但是当我对数据进行排序并滚动时，缓存的模板会破坏视图中的项目。换句话说：我对数据进行排序，并且列表更新正确。然后我向下滚动，但是当我再次向上滚动时，列表中的条目不正确，因为模板缓存。

此“问题”已在 GitHub here 上报告。

我试过禁用模板缓存，这解决了问题，但使列表性能很差，几乎无法使用。

所以...

我该如何使用它？有没有办法刷新 cdkVirtualFor 模板缓存？或者有其他方法可以让 sort 与 cdkVirtualFor 一起工作吗？

我试着做了一个最小的复制，但是模板缓存不是 运行 虽然我激活了它。我把它留在这里供参考，或者如果有人能告诉我如何使我的复制工作。

https://stackblitz.com/edit/angular-ivy-wzfnem?file=src%2Fapp%2Fapp.component.html

Answer 1

我知道出了什么问题。我 followed a comment 来自上面提到的 Github 问题，并且按照建议，将我的 ngOnInit 逻辑移到了 ngOnChanges 中。这修复了模板未正确“更新”的问题。