我在Angular 7 trackBy中遇到了一个奇怪的问题。我有一个2147483647/y
和一个ParentComponent
。我通过以下方式使用ChildComponent
:
ngfor
这很好。我在每个子组件上都有一个删除按钮,单击该按钮会将更新发送到<ng-container *ngFor="let te of entries; let teIndex = index; trackBy: trackByFn">
<app-entry (teUpdater)="updateEntry($event)" [entry]="te" [entryIndex]="teIndex">
</app-entry>
/ng-container>
,以使其知道要删除的条目:
ParentComponent
这也很好。有更新功能,但暂时不关注它。
我的updateEntry(data: any) {
if (data) {
if (data.action === ItemModes.Delete) {
this.entries.splice(data.index, 1);
} else {
this.entries[data.index] = data.te;
}
}
}
函数:
trackBy
现在想象我有3个条目:
trackByFn(index, item) {
return index;
}
我单击Entry1的删除按钮。 Entry1: { id: 1, someproperty: AAA }
Entry2: { id: 2, someproperty: BBB }
Entry3: { id: 3, someproperty: CCC }
被调用,并且索引被传递。 correct 元素被删除,ParentComponent.updateEntry()
现在为:
this.entries
如何最后一个条目(Entry3)已从UI中删除(尽管Entry2: { id: 2, someproperty: BBB }
Entry3: { id: 3, someproperty: CCC }
保留了正确的项目)。如果单击Entry2的删除操作,也会发生同样的情况。但是在UI中,它始终是最后被删除的条目。如果我更改this.entries
并删除trackBy-一切按预期进行。谁能解释我在哪里弄错了?