什么是“跟踪"?在 AngularJS 中它是如何工作的? [英] What is "track by" in AngularJS and how does it work?

问题描述

我不太了解 track by 的工作原理以及它的作用.
我的主要目标是将它与 ng-repeat 一起使用以增加一些精度.

I don't really understand how track by works and what it does.
My main goal is to use it with ng-repeat to add some precision.

推荐答案

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

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

Using track by to track strings & duplicate values

Normally ng-repeat tracks each item by the item itself. For the given array objs = [ 'one', 'one', 2, 'five', 'string', 'foo'], ng-repeat attempts to track changes by each obj in the ng-repeat="obj in objs". The problem is that we have duplicate values and angular will throw an error. One way to solve that is to have angular track the objects by other means. For strings, track by $index is a good solution as you really haven't other means to track a string.

你提到你对 angular 有点陌生.当 angular 对每个被观察的属性进行详尽的检查以反映对应视图的任何变化时，就会发生一个摘要循环；通常在摘要循环期间，您的代码会修改其他监视属性，因此需要再次执行该过程，直到 angular 检测到不再有更改为止.

You allude to the fact you're somewhat new to angular. A digest cycle occurs when angular performs an exhaustive check of each watched property in order to reflect any change to the correspodant view; often during a digest cycle it happens that your code modify other watched properties so the procedure needs to be performed again until angular detects no more changes.

例如:你点击一个按钮通过 ng-click 更新模型，然后你做一些事情(我的意思是你在回调中写的东西，当用户点击时执行)，然后 angular 触发摘要循环以刷新视图.我不太清楚地解释这一点，所以如果这不能澄清事情，你应该进一步调查.

For example: You click a button to update a model via ng-click, then you do somethings (i mean, the things you wrote in the callback to perform when an user makes a click), then angular trigger digest cycle in order to refresh the view. I'm not too articulate in explaining that so you should investigate further if that didn't clarify things.

回到track by.举个例子:

1. 调用服务返回对象数组
2. 更新数组中的对象并保存对象
3. 保存服务后，根据 API 返回的内容，您可以:

1. call a service to return an array of objects
2. update an object within the array and save object
3. after save service, depending on what the API returns, you may:

1. 替换整个对象或
2. 更新现有对象的值

反映ng-repeat UI 中的变化

reflect change in ng-repeat UI

您跟踪此对象的方式将决定 UI 如何反映更改.

How you track this object will determine how the UI reflects the change.

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

One of the most annoying UXs I've experienced is this. Say you have a table of objects, each cell has an input where you want to in-line edit those objects' properties. I want to change the value, then on-blur, save that object while moving to the next cell to edit while you might be waiting on the response. So this is an autosave type thing. Depending on how you setup your track by statement, you may lose current focus (e.g. the field you're currently editing) when the response gets written back into your array of objects.

这篇关于什么是“跟踪"?在 AngularJS 中它是如何工作的?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！