当服务器没有返回数据时，ag-grid 继续显示加载图标答案

【问题标题】：ag-grid continues to show the loading icon when no data returned from the server当服务器没有返回数据时，ag-grid 继续显示加载图标
【发布时间】：2022-01-23 21:31:39
【问题描述】：

我在 Ag-grid (Angular) 中遇到了一种奇怪的行为。当我使用 serverSide 选项并且没有从服务器返回数据时，网格会显示 cacheBlockSize 中提到的所有行的加载图标。我已经尝试了尽可能多的选项来隐藏这些空加载行，但没有任何结果。

我尝试在官方示例页面中复制相同的内容。幸运的是，我可以复制类似的行为。请参阅官方示例页面的此编辑版本，其中我从假服务器调用传递了一个空数组：

https://plnkr.co/edit/Egw9ToJmNE7Hl6Z6

  onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;

    this.http
      .get('https://www.ag-grid.com/example-assets/olympic-winners.json')
      .subscribe((data) => {
        let idSequence = 0;
        data.forEach((item) => {
          item.id = idSequence++;
        });
        const server = new FakeServer(data);
        const datasource = new ServerSideDatasource(server);
        params.api.setServerSideDatasource(datasource);
      });
  }
}

function ServerSideDatasource(server) {
  return {
    getRows: (params) => {
      setTimeout(() => {
        const response = server.getResponse(params.request);
        if (response.success) {
          params.successCallback(response.rows, response.lastRow);
        } else {
          params.failCallback();
        }
      }, 2000);
    },
  };
}
function FakeServer(allData) {
  return {
    getResponse: (request) => {
      console.log(
        'asking for rows: ' + request.startRow + ' to ' + request.endRow
      );
      const rowsThisPage = allData.slice(request.startRow, request.endRow);
      const lastRow = allData.length <= request.endRow ? data.length : -1;
      return {
        success: true,
        rows: [],
        lastRow: lastRow,
      };
    },
  };
}

plunker 输出的截图如下。

【问题讨论】：

标签： ag-grid ag-grid-angular

【解决方案1】：

刚刚发现它的 lastRow 值有问题。如果行为空但 lastRow 不是 -1，则它会尝试加载数据并根据 cacheBlockSize 显示所有行的加载图标。

下面的固定代码：

function FakeServer(allData) {
  return {
    getResponse: (request) => {
      console.log(
        'asking for rows: ' + request.startRow + ' to ' + request.endRow
      );
      let data = []; //allData;
      const rowsThisPage = data.slice(request.startRow, request.endRow);
      const lastRow = data.length <= request.endRow ? data.length : -1;
      return {
        success: true,
        rows: rowsThisPage,
        lastRow: lastRow,
      };
    },
  };
}

【讨论】：