Angular --实现trackBy的意义是什么？
因为最近，当你没有在每个*ngFor上实现trackBy-function时，Angular styleguide-lint-extender "Codelyzer“会抛出警告。我想知道为什么这会被认为是一个问题。
- 在这个blog中，实现trackBy的示例可以归结为
trackByFn(index, item) { return index;} // or item.id。如果我从索引切换到item.id，这将如何使我的应用程序更快？当涉及到数组的插入或删除时，index是最重要的最直接的事情。为什么ngFor-指令要比较对象的标识值呢？ - 在模块ng_for_of.d.ts中我可以找到
_trackByFn。所以我假设return index-trackBy是默认配置？那么为什么显式地实现它被认为是一种好的实践呢？
就我个人而言，我的应用程序中确实有一个很大的集合(数组)，它位于redux商店中。它只能由空数组替换，或者可以添加新项，例如：
return {...state, myArray: [...state.myArray, ...newItems]})，
但从未移动或删除过。我用item.id而不是index进行跟踪有意义吗？我真的应该在每个带有*ngFor的组件中实现return index;-function吗？
回答 1
Stack Overflow用户
发布于 2017-12-16 16:44:57
*ngFor通过对象标识跟踪项，并尝试在更新数组中已在数组中的项的迭代数组时避免重新呈现元素。
如果数组包含原始值(字符串、布尔值、数字)，那么在它们被修改后，*ngFor将无法识别它们。
字符串列表上的*ngFor，如
items = ['foo', 'bar', 'baz'];<input *ngFor="let item of items" [(ngModel)]="item">当在呈现的<input>中修改值时，会导致奇怪的行为，因为在每次键盘输入之后，值都会更改，并且*ngFor会失去对以前呈现项的位置的跟踪，因此删除更改前的值的输入，并在更改后的值中添加它。这会导致输入失去焦点，并可能导致输入改变位置。
要解决此问题，您可以指示*ngFor按索引而不是按标识进行跟踪。
另请参阅
- *ngFor Behaviour on primitive data type
- Angular2 NgFor inside tree model: wrong order when remove and then add elements
此外，对于对象，它可能很有用，例如，如果您希望*ngFor通过id属性跟踪项目。例如，如果使用了不可变值并且修改了列表中的某一项-这意味着替换为具有相同id属性值的新对象实例，但其他一些属性发生了更改，则这一点很有用。指示*ngFor通过id跟踪不会导致项被删除并重新添加到DOM。
如果*ngFor不能正确识别修改过的项目，也会导致像这个中所示的动画(来自How can I animate *ngFor in angular 2?)中断(动画太频繁)。
https://stackoverflow.com/questions/47843856
复制相似问题
腾讯云开发者
