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

Question

我在 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 输出的屏幕截图如下。

Answer 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,
      };
    },
  };
}

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

ag-grid continues to show the loading icon when no data returned from the server

ag-grid

ag-grid-angular