ng-repeat with track by 多个属性 [英] ng-repeat with track by over multiple properties

问题描述

我对 angular ng-repeat 指令有疑问.目前我在某个项目上工作，从 API 中我得到一个项目列表(有时可能是 1k 个项目)，这个列表应该每 5 秒刷新一次(它正在监控相关项目).

I have a problem with angular ng-repeat directive. Currently I work on some project where from the API I get a list of items (some times it could be 1k items) and this list should be refreshed every 5 seconds (it is monitoring related project).

当列表长度稍大时，网站在重新渲染 DOM 时可能会变慢".结果是 angular 重新生成了整个 DOM(但 95% 的项目是相同的！)

When the list length is a little bigger the website while re-rendering DOM could "slow". It comes out that angular regenerate the whole DOM (but 95% of item are the same ! )

一种可能的方法是将track by"表达式设置为例如 item.id.但是这里出现了另一个问题，我还想在其他用户更改例如描述时重新生成项目.由于 track by 是 item.id 的表达式，因此 item.description 中的更改不会更新 DOM 中的项目.

One of the possible approach is to set "track by" expression for example to item.id. But here comes another problem, I also want regenerate items when for example descriptions was changed by other user. Since track by is expression to item.id changes in item.description didn't update item in DOM.

有办法通过多个属性进行跟踪吗?也许是某种功能?或者也许可以通过手"进行比较?

There is way to track by over multiple properties? Maybe some function? Or maybe do comparison by "hand" ?

任何想法，我将不胜感激的代码示例:)

Any ideas, code samples I would appreciate :)

更新

当我将 track by 设置为 item.id 时，我发现 angular 并没有为项目重新构建 html，只是更新已创建元素中的值，它似乎比删除和创建更快".以前我虽然有点不同.

what I discover when I set track by to item.id angular didn't re-crete html for items, just update value in already created element and it seems to be "faster" then removing and creating. Previously I though a little bit different.

修复

对于那些在 ng-repeat 中寻找超过 1k 个项目的更好性能的人，请使用 按 item.id 跟踪 它将提高您的性能;)

For those who are looking for better performance over >1k items in ng-repeat USE track by item.id it will boost your performance ;)

推荐答案

您不需要创建一个函数来处理多属性跟踪.你可以这样做:

You do not need to create a function to handle track by multi properties. You can do:

<div ng-repeat="item in lines track by item.id+item.description">

这篇关于ng-repeat with track by 多个属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！