我使用的是 Angular 8 and material design including table
. 我取了大约7000行,使用 route resolver
然后我再次循环,将日期格式改为时间和格式,这样用户就可以阅读它,而不用担心UTC格式。这里我有一个问题。当从主标签导航到这个标签时,需要3到4秒的时间来加载。我可以做一个加载器或更好的性能改进。有什么办法可以改善这种情况?
一次获取7000行可能不是最好的主意,因为无论如何,你的用户很可能一次就能看到它们--理想的情况下,你会想在后端实现某种分页机制,在需要时分批获取它们。这将减少加载时间。
那么,无论你是否在后端实现了分页,你都不希望一次渲染7000行,因为这样成本很高。有两种常见的解决方案,都有不同的起伏。
使用分页。简单地使用 材料分页器 如示例所示,并且只显示有限的行。你甚至可以使用DataSource的自定义实现,只对显示的记录进行即时的日期转换。
使用虚拟滚动。这是一个比较棘手的问题,但是你可以使用 cdk-virtual-scroll-viewport 与...一起 mat-table
并只渲染屏幕上可见的行和一些缓冲区以加快滚动速度。虽然目前还没有开箱即用的实现,但你可以在 这个git问题.
也许还有其他方法,但这应该让你知道可以做什么。