一尘不染

AngularJS中的“跟踪依据”是什么,它是如何工作的?

angularjs

我不太了解其track by工作原理和作用。
我的主要目标是将它与配合使用以ng-repeat提高精度。


阅读 248

收藏
2020-07-04

共1个答案

一尘不染

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

通常ng-repeat按项目本身跟踪每个项目。对于给定的阵列objs = [ 'one', 'one', 2, 'five', 'string', 'foo']ng-repeat试图跟踪由每个变化objng-repeat="obj in objs"。问题是我们有重复的值,而角度将引发错误。解决该问题的一种方法是通过其他方式对对象进行角度跟踪。对于字符串,这track by $index是一个很好的解决方案,因为您实际上没有其他跟踪字符串的方法。

track by 并触发摘要和输入焦点

您暗示您对角度有些陌生。当angular对每个监视属性进行详尽检查以反映相应视图的任何变化时,就会发生摘要循环。通常在摘要周期中,您的代码会修改其他受监视的属性,因此需要再次执行该过程,直到角度检测到没有更多变化为止。

例如:您单击一个按钮通过来更新模型ng- click,然后执行一些操作(我的意思是,您在回调中编写的要在用户单击时执行的操作),然后执行角度触发摘要循环以刷新视图。我不太清楚地解释这一点,因此,如果这不能使您澄清,则应进一步调查。

回到track by。我们来看一个例子:

  1. 调用服务以返回对象数组
  2. 更新数组中的对象并保存对象
  3. 保存服务后,根据API返回的内容,您可以:
    1. 替换整个对象或
    2. 更新现有对象的值
  4. 反映ng-repeat用户界面的变化

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

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

2020-07-04