如何在 Angular 材料表中加载 50,000 条记录

Question

我是 Angular 的新手，正在学习 Angular。

我有一个可以从数据库中获取 50K 记录的 API。在前端我有两个组件

SearchComponent -> 提供搜索过滤器，可以看到过滤后的数据。

FormComponent -> 如果我们点击搜索组件 mat table 中的特定记录，则相应的 id 被发送到 API，它会获取该特定记录的数据并在表单中显示数据。

到目前为止，这两个组件之间没有任何关系。

所以，如果我点击记录，我将被移动到表单路线，如果我返回搜索路线，我的搜索过滤器和垫表数据将丢失。同样，我需要填写所有搜索过滤器，并且在表中加载数据也需要时间。这不是最佳做法。

如果我返回搜索路线，数据将保持不变的任何建议

Answer 1

首先，如果您是新手并正在学习 Angular，正如您所说 - 我强烈建议您不要在 Angular Material 表中加载 50K 记录。根据表的复杂程度（即，有多少列、列的复杂程度、它们是否可排序等），最佳位置在 1,000 到 5,000 条记录之间。任何高于此的时间都会导致显着延迟（至少 30 秒；可能是几分钟）。更好地限制从服务器返回的记录数，并实现分页。

第二，表单功能与您的问题有什么相关性？只是它不是一次性加载的事实，但您需要一次又一次地加载表格？更多不首先加载它的原因。

最后（这就是我将其作为答案而不是评论的原因）-如果您真的决定加载大量记录，则可以使用ngx-infinite-scroll。它将允许您仅加载一屏记录，系统将继续加载其余记录（类似于 Facebook 的做法）。但我建议向更有经验的 Angular 开发人员寻求帮助……或者根本不这样做！