Angular ng-repeat和Angular 材料md-virtual-repeat之间的区别?我应该在什么时候使用一个或另一个?
iszxjhcz1#
ng-repeat呈现列表中的所有元素,在大型列表中性能较低。md-virtual-repeat渲染视口上可见的列表,它不渲染列表的所有元素,当用户滚动大列表时,它似乎会渲染其他元素,这种方式性能良好,应在处理大列表时使用。
ng-repeat
md-virtual-repeat
9wbgstp72#
有Angular 的文档非常清楚地说明了这一点:Virtual repeat是ng-repeat的一个有限的替代品,它只呈现足够的dom节点来填充容器,并在用户滚动时回收它们。迭代支持数组,但不支持对象。不支持Track by、as alias和(key,value)语法。Source
wswtfjt73#
md-virtual-repeat类似于ng-repeat,但在您要加载大量数据时非常有用。假设您必须加载100,000条记录。在这种情况下,如果它是ng-repeat,那么它将首先加载所有数据。因此,用户可能会在加载时感到沮丧。如果用户只需要前50行数据,ng-repeat会强制他等待,直到加载所有100,000条记录!为了避免在材料中出现这种情况,我们使用了md-virtual-repeat。当需要下一组数据时,它会加载下一组数据(用户滚动以获取更多数据)最后,如果使用md-virtual-repeat,加载时间将得到优化。
stszievb4#
ngRepeat指令为集合中的每一项示例化一个模板。每个模板示例都有自己的作用域,其中给定的循环变量被设置为当前集合项,$index被设置为项索引或键。Sourceng-repeat在呈现到用户界面之前加载整个数据集。在处理较小的列表时,它非常有用。为了确保它最有效,建议在ng-repeat表达式中使用track by和或limit to。一个使用ng-repeat的md-data-table示例是Daniel Nagy's table如果记录列表很大,ng-repeat会变得非常慢。如果它很慢,建议使用md-virtual-repeatmd-virtual-repeat指定使用虚拟滚动来重复的元素。Virtual repeat是ng-repeat的有限替代,它只呈现足够的DOM节点来填充容器,并在用户滚动时回收它们。Sourcemd-virtual-repeat只在用户滚动时按需加载数据。当结果集较大时,它加载数据的速度要快得多。当将数据插入表时,md-virtual-repeat会变得很麻烦。
md-data-table
4条答案
按热度按时间iszxjhcz1#
ng-repeat
呈现列表中的所有元素,在大型列表中性能较低。md-virtual-repeat
渲染视口上可见的列表,它不渲染列表的所有元素,当用户滚动大列表时,它似乎会渲染其他元素,这种方式性能良好,应在处理大列表时使用。9wbgstp72#
有Angular 的文档非常清楚地说明了这一点:
Virtual repeat是ng-repeat的一个有限的替代品,它只呈现足够的dom节点来填充容器,并在用户滚动时回收它们。迭代支持数组,但不支持对象。不支持Track by、as alias和(key,value)语法。
Source
wswtfjt73#
md-virtual-repeat
类似于ng-repeat
,但在您要加载大量数据时非常有用。假设您必须加载100,000条记录。在这种情况下,如果它是
ng-repeat
,那么它将首先加载所有数据。因此,用户可能会在加载时感到沮丧。如果用户只需要前50行数据,ng-repeat
会强制他等待,直到加载所有100,000条记录!为了避免在材料中出现这种情况,我们使用了
md-virtual-repeat
。当需要下一组数据时,它会加载下一组数据(用户滚动以获取更多数据)最后,如果使用
md-virtual-repeat
,加载时间将得到优化。stszievb4#
ngRepeat指令为集合中的每一项示例化一个模板。每个模板示例都有自己的作用域,其中给定的循环变量被设置为当前集合项,$index被设置为项索引或键。Source
ng-repeat
在呈现到用户界面之前加载整个数据集。在处理较小的列表时,它非常有用。为了确保它最有效,建议在ng-repeat
表达式中使用track by和或limit to。一个使用ng-repeat
的md-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
会变得很麻烦。