ag-grid无限滚动的同步问题

Question

我正在为 ag-grid 进行 Angular 2 无限滚动，但在将数据部分与 setRowData 同步时遇到了问题。 调用第一个滚动事件处理程序后出现重复问题 （在滚动之前获取第 1 部分数据的第 2 部分数据）和对页面数据的 HTTP 请求 部分已发送。由于现在只有异步 HTTP 请求可用（不推荐使用同步）， 在收到 HTTP 响应之前，控件被传递给 setRowData。结果，旧的行数据用于填充网格， 第 1 页和第 2 页看起来相同。 任何阻止执行 setRowData UNTIL HTTP 响应的尝试都失败了。 setIntervals() 和 setTimeout() 没有阻塞，而“while”循环阻塞了一切，包括 HTTP 请求/响应。 在后一种情况下，执行将永远挂起，因为循环退出的条件从未满足，因为此标志已更新 只有在 Response 被处理后。 我也不能使 HTTP 请求同步。 下面是 HTTP 函数的代码：

private getDataPortionFromServer = function(startRow: number, endRow: number, firstTime: boolean) {
       console.log('getDataPortionFromServer: lastEndRow = ' + this.lastEndRow + ', current endRow' + endRow);
       if (this.lastEndRow == endRow) {
           console.log('getDataPortionFromServer: exiting to avopid dup call');
           return;
       }
       var url: string = ...; //co
  function getDataSynchronously(url, callback) {
      var httpRequest = new XMLHttpRequest();
      httpRequest.open('GET', url, true);
       httpRequest.setRequestHeader('Accept','*/*');
       httpRequest.setRequestHeader('Content-Type','application/json');
       sac.stillRetrieveing = true;
       httpRequest.onreadystatechange = function() {
         if (httpRequest.readyState == 4 && httpRequest.status == 200) {
          if (typeof callback == "function") {
             // apply() sets the meaning of "this" in the callback
             callback.apply(httpRequest);
          }
        }
       }
       httpRequest.send();
  }
  getDataSynchronously(
      url,
      function() {
        console.log('Rrocessing Response : ' + '[' + new Date().toUTCString() + '] ');
        var hs = this.responseText;
         //doing something with data in this.responseText;
                var rd = sac.fitInColumnDefinition(httpResult[0].data); // 'rd' is actual row data for a page
        stillRetrieveing = false; // !!! this is the flag; if false, execution may continue
                                 // otherwise execution should wait until stillRetrieveing = false

        if (firstTime) { //1st portion of Row Data before any scrolling
         setRowData(rd); //1st time no issue, problem comes when scrolling starts
        }
      sac.rowData = rd;
      }
  );
}

//这里是setRowData：

private setRowData(allOfTheData) {
    var sac: SampleAppComponent;
    sac = this;
    var dataSource = {
        rowCount: null, // behave as infinite scroll
        pageSize: sac.pageSize,
        overflowSize: sac.pageSize,
        maxConcurrentRequests: 2,
        maxPagesInCache: 2,

        getRows: (params:any) => {
         console.log('asking for ' + params.startRow + ' to ' + params.endRow);

         sac.getDataPortionFromServer(params.startRow, params.endRow, false); // !!! asynchronous, comes immediately to
                                                                              // next line: allOfTheData = sac.rowData
                                                                              // without waiting for fresh row data

/*
Realy need here some blocking mechanism that would allow:
a) block execution before the next line "allOfTheData = sac.rowData;"
b) during blocking, be able to observe somehow  value of 'stillRetrieveing' flag and detect when it changes
   (something like volatile in JAVA)
c) never exit blocking unless stillRetrieveing == false
*/

         setTimeout( function() {
             allOfTheData = sac.rowData;
                             // take a slice of the total rows
             var dataAfterSortingAndFiltering = sac.sortAndFilter(params.sortModel, params.filterModel,  allOfTheData);

                             // if on or after the last page, work out the last row.
             var lastRow = parseInt(sac.rowsReturned);
                             // call the success callback
             params.successCallback(dataAfterSortingAndFiltering, lastRow);

            }, 500);

        } //getRows: function (params)
    }; //var dataSource

    this.gridOptions.api.setDatasource(dataSource);
}

非常感谢任何建议或线索。

Answer 1

通过将行渲染器回调直接放入 HTTP 回调中解决了这个问题。不得不修改代码很多，但这是我能做到的唯一方法。 Promise 或 Observable 对我不起作用。