ng-repeat v/s md-virtual-repeat
ng-repeat v/s md-virtual-repeat
angular ng-repeat 和 angular material md-virtual-repeat 之间的区别?
我什么时候应该使用一个或另一个?
Angular 文档说得很清楚:
Virtual repeat is a limited substitute for ng-repeat that renders only enough dom nodes to fill the container and recycling them as the user scrolls. Arrays, but not objects are supported for iteration. Track by, as alias, and (key, value) syntax are not supported.
ng-repeat
呈现列表中的所有元素,它在大型列表上的性能较低。
md-virtual-repeat
渲染视口上可见的列表,它不渲染列表的所有元素,当用户在大列表的情况下滚动时,它会无缝地渲染其他元素,这样它的性能应该是在处理大型列表时使用。
md-virtual-repeat
类似于ng-repeat
,但是当你想加载大量数据时它非常有用。
假设您必须加载 100,000 条记录。在这种情况下,如果它是 ng-repeat
,那么它将首先加载所有数据。所以用户在加载时可能会感到沮丧。如果用户只想要前 50 行数据,ng-repeat
强制他等到所有 100,000 条记录都加载完毕!
为了在 material 中避免这种情况,我们有 md-virtual-repeat
。它在需要时加载下一组数据(用户滚动以获取更多数据)
最终,如果您使用 md-virtual-repeat
,加载时间将得到优化。
The ngRepeat directive instantiates a template once per item from a collection. Each template instance gets its own scope, where the given loop variable is set to the current collection item, and $index is set to the item index or key.
Source
ng-repeat
在渲染到 UI 之前加载整个数据集。在处理较小的列表时非常有用。为确保最有效,建议在 ng-repeat
表达式中使用 track by 和 or limit to。一个很好的 md-data-table
使用 ng-repeat
的例子是 Daniel Nagy's table
对于大量记录 ng-repeat
会变得非常慢。如果它很慢,建议的用法是切换到 md-virtual-repeat
md-virtual-repeat specifies an element to repeat using virtual scrolling.
Virtual repeat is a limited substitute for ng-repeat that renders only enough DOM nodes to fill the container and recycling them as the user scrolls.
Source
md-virtual-repeat
仅按需加载数据 - 用户滚动。当结果集很大时,它加载数据的速度要快得多! md-virtual-repeat
插入 table 时变得很麻烦。如果你 google it 将它与 table 一起使用时会出现很多错误。
最终ng-repeat
是最受支持的用法。我的个人目标是在拥有大型数据集时不使用 md-virtual-repeat
,而是尝试过滤掉不需要的行或使用分页。
angular ng-repeat 和 angular material md-virtual-repeat 之间的区别?
我什么时候应该使用一个或另一个?
Angular 文档说得很清楚:
Virtual repeat is a limited substitute for ng-repeat that renders only enough dom nodes to fill the container and recycling them as the user scrolls. Arrays, but not objects are supported for iteration. Track by, as alias, and (key, value) syntax are not supported.
ng-repeat
呈现列表中的所有元素,它在大型列表上的性能较低。
md-virtual-repeat
渲染视口上可见的列表,它不渲染列表的所有元素,当用户在大列表的情况下滚动时,它会无缝地渲染其他元素,这样它的性能应该是在处理大型列表时使用。
md-virtual-repeat
类似于ng-repeat
,但是当你想加载大量数据时它非常有用。
假设您必须加载 100,000 条记录。在这种情况下,如果它是 ng-repeat
,那么它将首先加载所有数据。所以用户在加载时可能会感到沮丧。如果用户只想要前 50 行数据,ng-repeat
强制他等到所有 100,000 条记录都加载完毕!
为了在 material 中避免这种情况,我们有 md-virtual-repeat
。它在需要时加载下一组数据(用户滚动以获取更多数据)
最终,如果您使用 md-virtual-repeat
,加载时间将得到优化。
The ngRepeat directive instantiates a template once per item from a collection. Each template instance gets its own scope, where the given loop variable is set to the current collection item, and $index is set to the item index or key. Source
ng-repeat
在渲染到 UI 之前加载整个数据集。在处理较小的列表时非常有用。为确保最有效,建议在 ng-repeat
表达式中使用 track by 和 or limit to。一个很好的 md-data-table
使用 ng-repeat
的例子是 Daniel Nagy's table
对于大量记录 ng-repeat
会变得非常慢。如果它很慢,建议的用法是切换到 md-virtual-repeat
md-virtual-repeat specifies an element to repeat using virtual scrolling. Virtual repeat is a limited substitute for ng-repeat that renders only enough DOM nodes to fill the container and recycling them as the user scrolls. Source
md-virtual-repeat
仅按需加载数据 - 用户滚动。当结果集很大时,它加载数据的速度要快得多! md-virtual-repeat
插入 table 时变得很麻烦。如果你 google it 将它与 table 一起使用时会出现很多错误。
最终ng-repeat
是最受支持的用法。我的个人目标是在拥有大型数据集时不使用 md-virtual-repeat
,而是尝试过滤掉不需要的行或使用分页。