在 Angular 8 中，有什么方法可以提高将数据提取到 table 的性能
In angualar 8, what way can be the performance improvement in fetching data to the table
我正在使用 Angular 8 and material design including table。我使用 route resolver 获取大约 7000 行，然后我再次循环将日期格式更改为时间和格式，以便用户可以阅读它而不必担心 UTC 格式。在这里我有一个问题。从主选项卡导航到此选项卡时，加载需要 3 到 4 秒。我能做的是制作装载机或更好的性能改进。有什么办法可以改善这种情况？
首先一次获取 7000 个可能不是最好的主意，因为很可能您的用户无论如何都可以一次查看它们 - 理想情况下您会希望在后端实现某种分页机制并在需要时分批获取。这将减少加载时间。
然后，无论您是否在后端实现了分页，您都不想一次渲染 7000 行，因为这样做的成本很高。有两种常见的解决方案，两者都有不同的起伏。
使用分页：按照示例使用Material paginator，只显示有限的行数。您甚至可以使用 DataSource 的自定义实现来仅实时转换显示记录的日期。
使用虚拟滚动：这有点棘手，但你可以使用cdk-virtual-scroll-viewport in conjunction with mat-table and render only rows that are visible on the screen and some buffer for faster scrolling. There is not out-of-box implementation though yet, but you can find some nice examples in this git issue。
可能还有其他方法，但这应该让您了解可以做什么。
我正在使用 Angular 8 and material design including table。我使用 route resolver 获取大约 7000 行，然后我再次循环将日期格式更改为时间和格式，以便用户可以阅读它而不必担心 UTC 格式。在这里我有一个问题。从主选项卡导航到此选项卡时，加载需要 3 到 4 秒。我能做的是制作装载机或更好的性能改进。有什么办法可以改善这种情况？
首先一次获取 7000 个可能不是最好的主意，因为很可能您的用户无论如何都可以一次查看它们 - 理想情况下您会希望在后端实现某种分页机制并在需要时分批获取。这将减少加载时间。
然后，无论您是否在后端实现了分页，您都不想一次渲染 7000 行，因为这样做的成本很高。有两种常见的解决方案，两者都有不同的起伏。
使用分页：按照示例使用Material paginator，只显示有限的行数。您甚至可以使用 DataSource 的自定义实现来仅实时转换显示记录的日期。
使用虚拟滚动：这有点棘手，但你可以使用cdk-virtual-scroll-viewport in conjunction with
mat-tableand render only rows that are visible on the screen and some buffer for faster scrolling. There is not out-of-box implementation though yet, but you can find some nice examples in this git issue。
可能还有其他方法，但这应该让您了解可以做什么。