Angular

Question

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

在此 blog 中，实施 trackBy 的示例归结为 trackByFn(index, item) { return index;} // or item.id。如果我从索引切换到 item.id，这将如何使我的应用程序更快？当谈到数组插入或删除时，索引是最直接重要的事情。为什么 [ngFor] 指令应该比较对象标识值？
在模块 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 (from How can I animate *ngFor in angular 2? 中所示的动画中断（动画太频繁）。

Angular - 实施 trackBy 有什么意义？

Angular - What is the point of implementing trackBy?

angularjs-track-by

ngfor