同一组件中的多个 *ngFor trackBy 函数

Question

我在 Angular 项目的

trackBy

指令上添加了一些

*ngFor

函数，以提高性能。
有一个组件有 2 个项目列表。两个列表的 trackBy 函数是相同的，并返回项目的 id 来识别它。 但是，一个列表中的某些项目可能与第二个列表中的项目具有相同的 id。

这就是为什么我想知道这是否可能是 trackBy 角度变化检测的唯一性问题，并且可能会产生副作用？
例如，我想象的一个副作用：如果列表中的一个项目与另一个列表中的项目具有相同的 id 正在更改，那么第二个项目是否也会因为 Angular“混乱”而刷新？

组件.html

<ng-container *ngFor="let item of list1; trackBy: trackById">
             ...                               
</ng-container>
<ng-container *ngFor="let item of list2; trackBy: trackById">
             ...                               
</ng-container>

组件.ts

list1 = [{ id: 1 }, { id: 3 }, { id: 5 }];
list2 = [{ id: 1 }, { id: 4 }, { id: 5 }, { id: 7 }];

trackById<T extends { id: string }>(item: T): string {
   return item.id;
}

Answer 1

确保

trackBy

函数为同一列表中的每个项目返回唯一的标识符非常重要。

在您的情况下，如果

list1

和

list2

可以包含具有相同

id

的项目，则可能会导致 Angular 的更改检测出现问题。如果由于数据的性质而可以这样做，您可以考虑在

id

前面添加一些上下文标识符以使其唯一。

类似这样的事情

list1 = [{ id: 'list1_1' }, { id: 'list1_3' }, { id: 'list1_5' }];
list2 = [{ id: 'list2_1' }, { id: 'list2_4' }, { id: 'list2_5' }, { id: 'list2_7' }];

trackById<T extends { id: string }>(item: T): string {
   return item.id;
}