ng-repeat具有多个属性的跟踪 [英] ng-repeat with track by over multiple properties

问题描述

我对angular ng-repeat指令有疑问. 目前，我正在某个项目上工作，在该项目中，我从API中获得了一个项目列表(有时可能是1000个项目)，并且应该每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时网站可能会变慢".结果表明，角度重新生成了整个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中的item.

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时，我发现的内容并未重新创建项目的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.

FIX

对于那些希望通过 ng-repeat 使用 item.id 跟踪> 1000个项目获得更好性能的用户，它将提高您的性能;)

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具有多个属性的跟踪的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！