Javascript 角度5和过渡仅在'；新'；项目

我的组件的模板呈现一个列表：

<div class="row">
  <div *ngFor="let m of activeModules" [@enterAnimation]>
    {{ m.name }}
  </div>
</div>

这很好，“div”具有从不透明度的过渡。 如果我这样做：

ngOnInit() {
  Observable.timer(2000).subscribe(() => {
    this.activeModules =  [{ name: 'modulo 1'}, { name: 'modulo 3'}, { name: 'modulo 2'}];
}

---

activeModules的数组将更新，模板将使用转换再次呈现列表。我的问题是，我只需要数组中的“新”项（在本例中，是中间的项）就可以进行转换。有可能吗？

当然，你只需要推送物品，而不是再次创建阵列

让我们为其创建一个函数：

pushAt(arr, index, item) {
  arr.splice(index, 0, item); 
}

现在你可以

ngOnInit() {
  Observable.timer(2000).subscribe(() => this.pushAt(this.activeModules, 1, { name: 'Modulo 2' }));
}

编辑也许您可以尝试使用自定义trackby功能：

customTrackBy(index, item) { return index; }

在HTML中

<div *ngFor="let m of activeModules; trackBy: customTrackBy;" [@enterAnimation]>

所以我不能使用新的数组，我必须对原始数组进行变异？如果你想让动画只在新项目上出现，是的，你必须使用第一个数组。否则，Angular将破坏第一个数组，然后放置第二个数组，这意味着他将撤回实际显示的元素，从而为所有元素设置动画。（我不知道这对你是否有意义，所以如果没有，请尽管说）是的，这对我来说是有意义的。问题是我使用的是redux方法，所以我的所有数据都是不可变的。我想我必须在呈现此列表的组件中执行一些“技巧”，可能将原始/第一个数据存储在此数组中，然后与来自存储区的数据进行比较。您可以尝试使用我的编辑，可能这会起作用，但我不确定，因此我没有先发布它。让我不断更新这个，这样我就可以删除它，以避免在它不起作用时产生混淆。它与trackBy和customTrack方法一起工作。真棒：-）

<div *ngFor="let m of activeModules; trackBy: customTrackBy;" [@enterAnimation]>