将大型 JSON 文件数据加载到 angular cli table

loading large JSON file data into angular cli table

我有一个 JSON 文件,里面有超过 200000 条记录。

我正在使用 Angular CLI 在 json-server API 的帮助下访问 JSON 数据以在本地访问它。

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

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

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

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

这可能是自以为是的答案,但您有很多选择。

  1. 尝试延迟加载 table 数据。

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

    ngInfiniteScroll

  3. 通过在 ngFor 上使用自定义过滤器过滤掉索引号为 0 的元素,为 table 添加分页。您可以使用以下很棒的插件库

    ngx-pagination

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

    ag-grid

    Angular DataTables

    SlickGrid

    PrimeNG Table