从 api 加载角度 ag-grid 数据

Question

我现在正在做一个从 api 获取数据并以角度 ag-grid 显示的项目。问题是从 api 获取数据需要很长时间。使用邮递员进行测试时，最多需要 5-15 秒才能得到回复。我考虑过使用延迟加载来分别请求每页的数据。

但是，我可能不得不一次又一次地重新调用 api 来显示每个页面中的数据，并且会遇到排序和过滤问题。我尝试搜索教程示例，但所有这些示例都已经在项目中使用 rowData 进行了测试。对我来说，我必须从 api 请求。我该怎么办？是api方面的问题吗？

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

附：我们还创建了 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);
        });
    }
};

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

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