何时不在AngularJS ng-repeat中使用'追踪$ index'？

Question

我最近得到了控制台错误`

错误:不允许在转发器中使用[ngRepeat:dupes]重复项.使用'track by'表达式指定唯一键...

- AngularJS错误参考 - ngRepeat:dupes

然后我使用'track by $index'了,问题解决了......

但这让我思考......你有没有理由不想track by $index在ng-repeat中使用？

我已经阅读过像这样的问题以及其他文章,但似乎几乎所有的文章都只谈论使用的优点'track by'.

有人可以列出缺点并举例说明你何时不想使用track by $index？

Answer 1

它有一个disadvantage,

'track by'表达式按数组中的索引进行跟踪.这意味着只要索引保持不变,angularjs就会认为它是同一个对象.

因此,如果替换数组中的任何对象,angularjs认为它没有改变,因为数组中的索引仍然相同.因此,当您预期变化检测时,变化检测不会触发.

看看这个 example

尝试更改名称,没有任何反应.按索引删除跟踪,它有效.按item.name添加曲目,它仍然有效.

Answer 2

有多种理由可以避免 track by $index

• 使用一次性绑定track by $index时避免使用
• track by $index当有唯一的属性标识符时避免使用
• 其他问题的例子 track by $index

使用一次性绑定track by $index时避免使用

该文档明确指出track by $index在使用一次性绑定时应避免使用.

来自Docs:

track by $index当重复的模板包含一次性绑定时,请避免使用.在这种情况下,nthDOM元素将始终与nth数组的项匹配,因此即使相应的项更改,也不会更新该元素上的绑定,从而导致视图与基础数据不同步.

- AngularJS ng-repeat参考 - 跟踪和重复

track by $index当有唯一的属性标识符时避免使用

track by $index当有唯一的属性标识符可以使用时,请避免使用.使用全部唯一的对象时,最好让ng-repeat自己使用自己的跟踪而不是覆盖track by $index.

来自Docs:

如果使用具有唯一标识符属性的对象,则应使用此标识符而不是对象实例进行跟踪.如果稍后重新加载数据,ngRepeat则不必为已呈现的项重建DOM元素,即使集合中的JavaScript对象已替换为新对象.对于大型集合,这可以显着提高渲染性能.

- AngularJS ng-repeat指令API参考 - 跟踪

其他问题的例子 track by $index

在对象数组中添加和删除对象时,我也遇到了问题.

• 使用Angular UI Carousel的$ index跟踪问题
• Ng-Repeat通过一次时间绑定显示不规则行为
• Angular:使用新数据更新$ scope会导致使用ng-repeat时保留旧数据
• AngularJS和Select绑定无法加载默认值