没有完全刷新的角度数组更新

Question

问题： 有一个数组，例如

[{id: 1, name: "stefan"}, {id: 2, name: "alex"}, ...]

此列表绑定到*ngFor，后者也可以显示详细信息。

现在服务器上有一个带有新列表的更新

[{id: 1, name: "stefanie"}, {id: 2, name: "alexandra"}, ...]

因此id是相同的，但是name是相同的。

要求： 现在，如果我要将新数组分配给现有数组，*ngFor将完全刷新，从而隐藏我的详细信息窗口。但是我只想

• 如果已经存在具有相同id的项目，请更新项目
• 添加新项
• 删除不再存在的项目

我找到了答案，如何通过过滤和更新来做到这一点，但是这对我来说似乎是一个非常普遍的问题。所以我想这里有一个内置的函数或一个聪明的库可以解决此问题...对吗？

Answer 1

您可能正在寻找angular的TrackBy功能。使用TrackBy，Angular可以使用唯一的标识符来检测哪些项被删除或添加到数组。因此，只需在DOM中更新添加或删除的项目即可。

Here是对TrackBy的扩展解释。

Answer 2

您正在使用TrackBy寻找的 * ngFor。