在angualar 8中,通过什么方式可以提高表的数据获取性能呢?

问题描述 投票:0回答:1

我使用的是 Angular 8 and material design including table. 我取了大约7000行,使用 route resolver 然后我再次循环,将日期格式改为时间和格式,这样用户就可以阅读它,而不用担心UTC格式。这里我有一个问题。当从主标签导航到这个标签时,需要3到4秒的时间来加载。我可以做一个加载器或更好的性能改进。有什么办法可以改善这种情况?

angular-material bigdata angular8
1个回答
0
投票

一次获取7000行可能不是最好的主意,因为无论如何,你的用户很可能一次就能看到它们--理想的情况下,你会想在后端实现某种分页机制,在需要时分批获取它们。这将减少加载时间。

那么,无论你是否在后端实现了分页,你都不希望一次渲染7000行,因为这样成本很高。有两种常见的解决方案,都有不同的起伏。

  • 使用分页。简单地使用 材料分页器 如示例所示,并且只显示有限的行。你甚至可以使用DataSource的自定义实现,只对显示的记录进行即时的日期转换。

  • 使用虚拟滚动。这是一个比较棘手的问题,但是你可以使用 cdk-virtual-scroll-viewport 与...一起 mat-table 并只渲染屏幕上可见的行和一些缓冲区以加快滚动速度。虽然目前还没有开箱即用的实现,但你可以在 这个git问题.

也许还有其他方法,但这应该让你知道可以做什么。

© www.soinside.com 2019 - 2024. All rights reserved.