将大型 JSON 文件数据加载到 Angular cli 表中

Posted 2023-03-27

【中文标题】将大型 JSON 文件数据加载到 Angular cli 表中

【英文标题】：loading large JSON file data into angular cli table

【发布时间】：2018-10-06 18:06:31

【问题描述】：

我有一个 JSON 文件，其中包含超过 200000 条记录。

我正在使用 Angular CLI 访问 JSON 数据，并借助 json-server API 在本地访问它。

我使用 Angular http 请求访问 JSON，它显示在浏览器中，但没有显示在 angular table 组件中。

我检查了是否能够用更少的记录访问它，然后显示它，我检查了多达 1000 条记录，但我不知道它最多可以访问多少。

所以我只想要任何有效地将大型 JSON 数据访问到角度视图的解决方案。

请提出任何解决方案或替代方案。

【参考方案1】：

这可能是固执己见的答案，但您有很多选择。

尝试延迟加载表数据。

通过初始加载 50 行来实现无限滚动，当用户到达表的末尾时，加载下一个 50，依此类推。使用以下插件来最小化您的代码。

ngInfiniteScroll

使用 ngFor 上的自定义过滤器将分页添加到表格中，以过滤掉索引号为的元素。您可以使用以下很棒的插件库

ngx-pagination

利用网格。这是性能最佳、可靠的解决方案。有许多网格，如 ag-grid、slickgrid、Angular 数据表等，可根据需要使用。 ag-grid 是 Angular 支持的，而 slickgrid 是纯 js 网格，但您当然可以在 Angular 项目中进行配置。您也可以尝试 PrimeNg 的数据表。 使用网格，搜索、过滤、导出表格数据变得非常高效。

ag-grid

Angular DataTables

SlickGrid

PrimeNG Table