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

问题描述

我不太了解跟踪方式的工作原理和作用.
我的主要目标是将其与 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，'5'，'string'，'foo'] ， ng-repeat 尝试跟踪通过 ng-repeat ="objs中的obj" 中的每个 obj 进行更改.问题是我们有重复的值，而角度将引发错误.解决该问题的一种方法是通过其他方式对对象进行角度跟踪.对于字符串，通过$ 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对每个观察到的属性进行详尽检查以反映相应视图的任何变化时，就会发生摘要循环.通常在摘要周期中，您的代码会修改其他受监视的属性，因此需要再次执行该过程，直到角度检测到没有更多变化为止.

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 更新模型，然后执行某些操作(我的意思是，您在回调中编写的操作将在用户单击时执行)，然后触发角度触发摘要循环以刷新视图.我不太清楚地解释这一点，因此，如果这不能使您澄清，您应该进一步调查.

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.

然后回到跟踪依据.让我们举个例子:

So back to track by. Let's use an example:

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 用户界面中反映更改

reflect change in ng-repeat UI

如何跟踪此对象将确定UI如何反映更改.

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

我经历过的最烦人的UX之一就是这个.假设您有一个对象表，每个单元格都有一个输入，您想在其中在线编辑这些对象的属性.我想更改值，然后<模糊处理> ，保存该对象，同时移动到下一个单元格进行编辑，而您可能正在等待响应.所以这是一个自动保存类型的东西.取决于您如何设置 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屋！