angular - 将项目添加到 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。我怎样才能对底层对象显示进行更改？

score 0 · Accepted Answer

在这里找到了答案。cdkVirtualFor 不渲染新项目。基本上 cdkVirtualFor 希望对底层数组的更改使该数组不可变。使用扩展运算符而不是 unshift 就可以了。

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

1 回答 1