我的模板中有一个带动画项目的简单列表（：输入＆：离开动画）：
@itemAnimation *ngFor="let item of list;
还有一个“添加”按钮，用于打开表单作为模式对话框，用户可以将新项目添加到列表中。
用户在模态上单击“保存”后，模型将关闭。之后，为了始终显示最新数据（即在多标签的情况下），我们再次从后端加载所有项目，然后我们再次设置列表：
this.list = ....
在这种情况下，所有项目将再次动画，而不仅仅是新项目（或更改的项目），因为Angular认为它们都是新项目。如何为新的和更改的项目制作动画？
我知道我可以在列表中查找更改，手动删除并重新添加已更改的列表。但我正在寻找一种更简单的方法（可能是内置角度），它可以自动检测并且不会替换旧项目。
您可以将trackBy函数与* ngFor结合使用。 Per Docs：https://angular.io/guide/template-syntax#ngfor-with-trackby
你可以尝试找到this.list和BE的新列表之间的差异。然后制作this.list.push(item)。
我刚刚在我写的应用程序中解决了这个问题。这一切都归结为数据结构的可变性。
我不会详细介绍并给出简短的答案......角度动画指令不会像你想要的那样使用不可变数组。您必须改变现有的项目数组，而不是在更新数据时传递对新数组的新引用。
要在组件级别实现这一点，最简洁的方法（在我看来）是保持组件通信不可变（使用异步管道的observables来传递新的状态下游），但是当它实际到达表示组件时，你必须改变一个现有的集合，并将它保持在不可变的输入中......就像这样：
@Input() collection: any[]
mutableCollection: any[]
在实践中，这意味着编写一些粗略的变异函数，小心只使用变异数组方法。
Here is a great article highlighting mutative vs non-mutating array methods
如果这没有意义，我可以向您展示一些代码，突出显示可变和不可更新的数组之间的差异，只需在这里发表评论。