Angular 角度：如何在连续读取中设置刚更改的项目的动画&；覆盖列表

我的模板中有一个包含动画项目（：enter&:leave animations）的简单列表：

@itemAnimation *ngFor="let item of list;

还有一个“添加”按钮，它以模式对话框的形式打开表单，用户可以向列表中添加新项

用户单击modal上的“保存”后，模型将关闭。之后，为了始终显示最新数据（即在多选项卡情况下），我们再次从后端加载所有项目，并再次设置列表：

 this.list = ....

在这种情况下，所有项目将再次设置动画，而不仅仅是新项目（或更改的项目），因为Angular认为它们都是新项目。如何仅设置新项目和更改项目的动画

---

我知道我可以在列表中查找更改，手动删除并重新添加更改的列表。但是我正在寻找一种更简单的方法（可能是内置的角度），它可以自动检测并且不替换旧的项目。

您可以尝试查找

此.list

与BE中的新列表之间的差异。然后制作

这个.list.push（项目）

我刚刚在我正在编写的一个应用程序中解决了这个问题。这一切归结为数据结构的易变性

我不会说得太详细，给你一个简短的回答。。。angular animations（角度动画）指令将不在不可变数组中正常工作。更新数据时，您必须改变现有的项数组，而不是将新的引用传递给新数组

要在组件级别实现这一点，最干净的方法（在我看来）是保持组件通信不变（使用异步管道中的可观察对象向下传递新状态），但是，当它真正涉及到呈现组件时，您必须对现有集合进行变异，并将其与不可变输入一起维护。。。像这样：

---

@Input（）collection:any[]

您可以将trackBy函数与*ngFor结合使用。

---

根据文档：

是，这是一个选项。。我想看看是否有任何角度的方法可以自动完成。我不认为角度会自动跟踪是否有差异。当您执行

this.list=[…]

时，它基本上是将新引用设置到新数组的变量中。这是你应该自己处理的事情。此外，我认为您甚至不需要从后端重新加载所有内容。如果模型匹配，则无需进行新调用。数据始终可以从其他人（即管理员）处编辑。因此，我们应该始终使用任何操作加载新列表。@VitaliiChmovzh确信它可以->更改检测operations@iLuvLogix它不会尝试比较2个数组，如果您直接设置它，它会公然重新显示整个列表，这种情况下会发生。这就是为什么会触发所有动画。