Я выполняю бесконечную прокрутку Angular 2 для ag-grid, и у меня возникла проблема с синхронизацией части данных с setRowData. Проблема дублирования возникает после того, как вызывается обработчик 1-го события прокрутки (чтобы получить 2-ю часть данных, поскольку первая была загружена изначально, перед прокруткой) и отправляется HTTP-запрос для части данных страницы. Поскольку теперь доступен только асинхронный HTTP-запрос (синхронный был устаревшим), управление передается в setRowData ДО получения HTTP-ответа. В результате старые данные строк используются для заполнения сетки, а 1-я и 2-я страницы выглядят одинаково. Любые попытки заблокировать выполнение setRowData ДО получения HTTP-ответа не удались. setIntervals () и setTimeout () не блокировались, в то время как цикл while блокировал ВСЕ, включая HTTP-запрос / ответ. В последнем случае выполнение просто зависает навсегда, поскольку условие выхода из цикла никогда не выполняется, поскольку этот флаг обновляется только после обработки ответа. Я также не мог сделать 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);
}
Был бы очень признателен за любой совет или подсказку.
