将项目添加到cdkVirtualFor

Question

由于列表中有大量用户，因此我使用cdkVirtualFor。该列表具有过滤功能，当它是cdkVirtualFor而不是常规的* ngFor时，效果会更好。

我现在需要使用以下方式将项目添加到列表中

this.filteredUsersList.unshift({});

当我使用

<div *ngFor="let user of filteredUserList">
 <div>Each Item</div>
</div>

新的空白项目显示在列表顶部。

当我使用

<div *cdkVirtualFor="let user of filteredUserList">
  <div>Each Item</div>
</div>

该项目没有出现。

我想继续使用cdkVirtualFor。如何显示对基础对象的更改？

Answer 1

在这里找到答案。 cdkVirtualFor not rendering new items。基本上cdkVirtualFor希望对基础数组的更改是不可变的。使用传播算子而不是平移就可以了。

let newUser = {}
this.filteredUserNames = [newUser, ...this.filteredUserNames]