Question

最近，当你没有在每个* ngFor上实现trackBy函数时，Angular styleguide-lint-extender“Codelyzer”会抛出警告。我想知道为什么这被认为是一个问题。

在此blog中，实现trackBy的示例归结为trackByFn(index, item) { return index;} // or item.id。如果我从index切换到item.id，这将如何使我的应用程序更快？当涉及到数组插入或删除时，索引是最直接的事情。为什么[ngFor] -directive比较对象标识值呢？
在模块ng_for_of.d.ts中，我可以找到_trackByFn。所以我假设，return index - trackBy是默认配置吗？那么为什么明确地实施它会被视为一种好的做法？

现在个人而言，我的应用程序中有一个大集合（数组），它位于redux商店中。它只能由空数组替换，或者可以添加新项，例如：

return {...state, myArray: [...state.myArray, ...newItems]}），

但从未移动或删除过。我可以通过item.id代替index进行跟踪吗？我是否真的应该在每个组件中使用* ngFor？

实现return index; - 函数

Answer 1

*ngFor按对象标识跟踪项目，并尝试避免在为数组中的项目更新迭代数组时重新呈现元素。数组中的项目已在更新之前的位置。

如果数组包含原始值（字符串，布尔值，数字），则*ngFor在修改后无法识别它们。

在

之类的字符串列表上*ngFor

items = ['foo', 'bar', 'baz'];

<input *ngFor="let item of items" [(ngModel)]="item">

在渲染的<input>中修改值时，

会导致疲劳行为，因为在每次键盘输入后，值会发生变化，而*ngFor会松散跟踪之前渲染项目的位置，因此会删除输入更改前的值，并将其添加为更改后的值。这会导致输入失去焦点并导致输入改变位置。

要解决此问题，您可以指示*ngFor按索引而不是按身份进行跟踪。

另见

对于对象，它也很有用，例如，如果您希望*ngFor通过id属性跟踪项目。例如，如果使用了不可变值并且修改了列表项，则这很有用 - 这意味着由具有id属性相同值的新对象实例替换，但其他一些属性已更改。指示*ngFor按id进行跟踪不会导致项目被删除并重新添加到DOM中。

*ngFor无法正确识别修改过的项目也会导致此Plunker example（来自How can I animate *ngFor in angular 2?）中显示的动画中断（动画过于频繁）。