angular - 当我们要迭代的数据较少时，cdkvirtualfor 不起作用

Question

当我过滤数组时，我们没有得到垂直滚动的数据。所以*cdkVirtualFor不要重新渲染 UI。当我们有更多数据时，它会起作用。

如果我*ngFor总是使用它，它会起作用。

对于我的情况，使用 *ngFor 是更好的选择，或者我们仍然可以使用 *cdkVirtualFor 并进行一些更改来解决这个问题？

还是这与高度有关cdk-virtual-scroll-viewport？

Answer 1

在默认的 FixedSizeVirtualScrollStrategy 中，有一个名为 onDataLengthChanged 的​​方法。它仅在传递的项目的引用发生更改时调用。所以要查看效果，您应该替换整个项目数组。换句话说，您应该将数组视为不可变数组。例如，如果我有一个包含 100 个项目的数组并在其上运行以下代码，则虚拟滚动不会自行更新，因为数组引用没有改变。

    let i = 90;
    while (i > 0) {
      i--;
      this.items.pop();
    }

但是如果我用下面的代码替换数组引用。它会明白的。并更新自己

this.items = this.items.splice(0, 10);