Question

我正在为ag-grid做Angular 2无限滚动，并且遇到了使用setRowData同步数据部分的问题。在调用第一个滚动事件处理程序之后出现重复问题（在滚动之前最初加载第一部分时获得第二部分数据）和页面数据的HTTP请求部分被发送。由于现在只有异步HTTP请求可用（不推荐使用同步），在收到HTTP响应之前，控制权被传递给setRowData。结果，旧行数据用于填充网格，和第一＆amp;第2页看起来相同。任何阻止执行setRowData UNTIL HTTP响应的尝试都会到达，失败。 setIntervals（）＆amp; setTimeout（）没有阻塞，而“while”循环阻止包括HTTP请求/响应在内的一切。在后一种情况下，执行只会永远挂起，因为更新此标志后，循环退出的条件永远不会满足仅在处理响应之后。我也不能使HTTP请求同步。 Bellow是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回调来解决它。不得不重新修改代码，但这是我能做到的唯一方法。承诺或观察不适合我。

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

1 个答案: