Angular 从 api 加载农业网格数据

Question

我现在正在进行一个项目，从 api 获取数据并显示在 angular ag-grid 中。问题是从 api 获取数据需要很长时间。使用邮递员进行测试时，最多需要 5-15 秒才能收到回复。我想到了使用延迟加载来单独请求每个页面的数据。

但是，我可能不得不一次又一次地重新调用 api 以在每个页面中显示数据，并且在排序和筛选时会出现问题。我尝试搜索教程示例，但所有示例都使用项目中已有的 rowData 进行了测试。对我来说，我必须向 api 请求。我该怎么办？是api那边的问题吗？

目前，我想将 api 的数据请求分为两个阶段。起初，我只会从 api 请求大约 20 行数据并将其显示在 ag-grid 中。一旦数据加载到屏幕上，在后台，将进行新的 api 调用以调用所有数据，然后更新 ag-grid。有什么方法可以在 rowData 中的数据发生变化时立即自动更新 ag-grid？有什么方法可以推荐吗？

P.S。我们还创建了 api 所以可以创建新的 api.

Answer 1

您可以使用 ag-grid 的 Infinite Row Model 功能实现此目的。只需查看文档即可清楚地了解如何配置它。我将引导您完成一些基本步骤，以使您了解如何实现它。

第一步，您需要在 gridOptions 中配置以下属性以及其他选项。

{
  rowModelType: 'infinite',
  cacheBlockSize: 20,
  datasource: myDataSource
}

这里的 cacheBlockSize 设置为 20，因为您从 API 中将请求页面行计数为 20。您可以根据自己的需要进行配置。

由于您使用的是无限行模型，因此您不能直接设置网格数据，而是需要使用数据源。

const myDataSource: IDatasource = {
    rowCount: null,
    getRows: (params: IGetRowsParams) => {
        yourApiRequestService.subscribe((data) => {
            let lastRow = -1;
            if (data.length <= params.endRow) {
                lastRow = data.length;
            }

            params.successCallback(data, lastRow);
        });
    }
};

我已经在提供的 gridOptions 中将此 myDataSource 设置为数据源属性。

配置这些将使网格在需要显示时自动获取数据。希望这个回答对您有所帮助。

Angular 从 api 加载农业网格数据

Angular ag-grid data loading from api

api

lazy-loading

ag-grid

angular