Angular 7 trackBy的问题

时间:2019-07-16 21:16:45

标签: angular ngfor

我在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-一切按预期进行。谁能解释我在哪里弄错了?

0 个答案:

没有答案