角度ng重复和角度材料md-virtual-repeat之间的区别?
我应该何时使用其中一种?
答案 0 :(得分:5)
ng-repeat
呈现列表中的所有元素,在大型列表中的性能较差。
md-virtual-repeat
呈现视口中可见的列表,它不呈现列表的所有元素,当用户在大型列表的情况下滚动它然后似乎呈现其他元素时,这种方式是其性能,应当在使用大型列表。
答案 1 :(得分:4)
Angular文档非常清楚地说明了这一点:
虚拟重复是ng-repeat的有限替代品,它只渲染足够的dom节点来填充容器并在用户滚动时回收它们。迭代支持数组,但不支持对象。不支持跟踪,作为别名和(键,值)语法。
答案 2 :(得分:2)
md-virtual-repeat
与ng-repeat
类似,但在您要加载大量数据时非常有用。
考虑您必须加载100,000条记录。在这种情况下,如果它是ng-repeat
,那么它将最初加载所有数据。因此,用户在加载时可能会感到沮丧。如果用户只想要前50行数据,ng-repeat
会强迫他等到所有100,000条记录加载!
为了避免这种情况,我们有md-virtual-repeat
。它在需要时加载下一组数据(用户滚动以获取更多数据)
最终,如果您使用md-virtual-repeat
,则优化加载时间。
答案 3 :(得分:0)
ngRepeat指令从集合中为每个项目实例化一次模板。每个模板实例都有自己的作用域,其中给定的循环变量设置为当前集合项,$ index设置为项索引或键。 Source
ng-repeat
在渲染到UI之前加载整个数据集。处理较小的列表时非常有用。为确保最有效,建议在ng-repeat
表达式中使用track by和or limit。使用md-data-table
的一个很棒的ng-repeat
示例是Daniel Nagy's table
有大量记录ng-repeat
变得非常慢。如果速度很慢,建议用法是切换到md-virtual-repeat
md-virtual-repeat指定使用虚拟滚动重复的元素。 虚拟重复是ng-repeat的有限替代,它只渲染足够的DOM节点来填充容器并在用户滚动时回收它们。 Source
md-virtual-repeat
仅按需加载数据 - 用户滚动。当结果集很大时,它可以更快地加载数据!将md-virtual-repeat
插入表格时,ng-repeat
会变得很麻烦。如果你google it使用表格会有很多错误。
最终md-virtual-repeat
是最受支持的用法。我的个人目标是在拥有大型数据集时不使用const
,而是尝试过滤掉不需要的行或使用分页。