angularjs NG重复v/s MD虚拟重复

rqcrx0a6  于 2022-10-31  发布在  Angular
关注(0)|答案(4)|浏览(183)

Angular ng-repeat和Angular 材料md-virtual-repeat之间的区别?
我应该在什么时候使用一个或另一个?

iszxjhcz

iszxjhcz1#

ng-repeat呈现列表中的所有元素,在大型列表中性能较低。
md-virtual-repeat渲染视口上可见的列表,它不渲染列表的所有元素,当用户滚动大列表时,它似乎会渲染其他元素,这种方式性能良好,应在处理大列表时使用。

9wbgstp7

9wbgstp72#

有Angular 的文档非常清楚地说明了这一点:
Virtual repeat是ng-repeat的一个有限的替代品,它只呈现足够的dom节点来填充容器,并在用户滚动时回收它们。迭代支持数组,但不支持对象。不支持Track by、as alias和(key,value)语法。
Source

wswtfjt7

wswtfjt73#

md-virtual-repeat类似于ng-repeat,但在您要加载大量数据时非常有用。
假设您必须加载100,000条记录。在这种情况下,如果它是ng-repeat,那么它将首先加载所有数据。因此,用户可能会在加载时感到沮丧。如果用户只需要前50行数据,ng-repeat会强制他等待,直到加载所有100,000条记录!
为了避免在材料中出现这种情况,我们使用了md-virtual-repeat。当需要下一组数据时,它会加载下一组数据(用户滚动以获取更多数据)
最后,如果使用md-virtual-repeat,加载时间将得到优化。

stszievb

stszievb4#

ngRepeat指令为集合中的每一项示例化一个模板。每个模板示例都有自己的作用域,其中给定的循环变量被设置为当前集合项,$index被设置为项索引或键。Source
ng-repeat在呈现到用户界面之前加载整个数据集。在处理较小的列表时,它非常有用。为了确保它最有效,建议在ng-repeat表达式中使用track by和或limit to。一个使用ng-repeatmd-data-table示例是Daniel Nagy's table
如果记录列表很大,ng-repeat会变得非常慢。如果它很慢,建议使用md-virtual-repeat
md-virtual-repeat指定使用虚拟滚动来重复的元素。Virtual repeat是ng-repeat的有限替代,它只呈现足够的DOM节点来填充容器,并在用户滚动时回收它们。Source
md-virtual-repeat只在用户滚动时按需加载数据。当结果集较大时,它加载数据的速度要快得多。当将数据插入表时,md-virtual-repeat会变得很麻烦。

相关问题