javascript - AngularJS 中的 "track by"是什么？它是如何工作的？

Question

我不太明白 track by 的工作原理及其用途。
我的主要目标是将其与 ng-repeat 一起使用以增加一些精度。

Answer 1

使用track by来跟踪字符串和重复值

通常 ng-repeat 按项目本身跟踪每个项目。对于给定数组 objs = [ 'one', 'one', 2, ' Five', 'string', 'foo']，ng-repeat 尝试跟踪ng-repeat="obj in objs" 中的每个 obj 都会发生变化。问题是我们有重复的值，而 Angular 会抛出错误。解决这个问题的一种方法是通过其他方式对物体进行 Angular 跟踪。对于字符串，track by $index 是一个很好的解决方案，因为您确实没有其他方法来跟踪字符串。

跟踪并触发摘要和输入焦点

您提到您对 Angular 有点陌生。当 Angular 对每个监视的属性进行详尽检查以反射(reflect)对应 View 的任何更改时，就会发生摘要循环；通常在摘要周期中，您的代码会修改其他监视的属性，因此需要再次执行该过程，直到 Angular 检测到不再有任何更改。

例如:您单击一个按钮通过 ng-click 更新模型，然后您执行一些操作(我的意思是，您在回调中编写的在用户单击时执行的操作) ，然后 Angular 触发摘要循环以刷新 View 。我解释得不太清楚，所以如果这不能澄清问题，您应该进一步调查。

所以回到跟踪。让我们举个例子:

1. 调用服务以返回对象数组
2. 更新数组中的对象并保存对象
3. 保存服务后，根据 API 返回的内容，您可以:
   1. 替换整个对象或
   2. 更新现有对象的值
4. 反射(reflect) ng-repeat UI 中的更改

跟踪此对象的方式将决定 UI 如何反射(reflect)更改。

我经历过的最烦人的用户体验之一就是这个。假设您有一个对象表，每个单元格都有一个输入，您可以在其中内联编辑这些对象的属性。我想更改该值，然后on-blur，保存该对象，同时移动到下一个单元格进行编辑，而您可能正在等待响应。所以这是一个自动保存类型的东西。根据您设置 track by 语句的方式，当响应写回对象数组时，您可能会失去当前焦点(例如当前正在编辑的字段)。