带有排序列表的角度无限滚动会导致无限循环

Question

我正在开发一个 Angular 项目。我利用 IntersectionObvserver 实现了一个“无限滚动”列表。一般来说，效果很好，令人满意。

构建列表的条目按升序排序。

在 Angular 中，这会导致 HTML 列表向上构建的问题，而滚动条保持在触发无限滚动事件的同一位置，这会导致该事件一遍又一遍地触发，直到用户手动滚动离开。

只要无限滚动触发器位于视口中，事件就会被触发，这是期望的行为，因为根据视口高度和用户偏好，不能保证最初总是有足够的项目来填充整个页面。新项目必须不断加载，直到页面被填满。

滚动到列表的最后会触发无限滚动事件。它将使滚动条保持在同一位置并在向上构建列表时触发事件。

在

generateItems()

函数中调用

sortItems()

。当您禁用此调用时，无限滚动列表的滚动行为可以正常工作。添加到列表中的新项目会导致列表增长并将无限滚动触发器推出视口。

当我使用本机

JavaScript

和

jQuery

实现相同的无限滚动逻辑时，即使结果已排序，它也会按预期工作。

这里，当列表更新时，无限滚动触发器总是被推出视口。这就是我所期待的。

我在 Angular 中做错了什么吗？

如何才能重现我在 Angular 中的 JavaScript / jQuery 示例中看到的相同结果？

Answer 1

我不确定为什么它在 jQuery 上工作，但我实际上找到了问题和解决方案。发生此问题是因为

sortItems

函数直接修改原始数组，并且在模板中重新渲染整个数组。

因此，我修改了排序函数，如下所示，它的作用是将克隆副本返回到原始数组并重新分配它（而不是修改它）。

private sortItems() {
  return this.items.slice(0).sort((a, b) => a.index - b.index);
}

如果您想了解有关突变的更多信息，可以参考此answer