Ag-grid: окно просмотра не загружает данные

Question

Это вторая часть этого вопроса: область просмотра Ag-grid: невозможно прочитать свойство 'bind' из неопределенного

Я правильно определил все функции, запрошенные интерфейсом viewport, но я не могу загрузить данные в сетку, как вы можете видеть в этом плунжере:

https://plnkr.co/edit/EEEJULRE72nbPF6G0PCK

В частности, эти этапы, описанные в документации, не выполняются:

2. Источник данных отвечает размером данных (например, 1000 строк) и вызывает params.setRowCount(1000). Сетка отвечает изменением размеров вертикальной прокрутки, чтобы она помещалась в 1000 строк.

3. Сетка, из-за ее физического размера на экране, работает так, что может отображать 20 строк в любой момент времени. Поскольку позиция прокрутки находится в начале, она вызывает datasource.setViewportRange(0,19), информируя источник данных, какие данные ему нужны. Сетка покажет пустые строки на данный момент.

Я запустил событие заполнения сетки, определяющее эту функцию:

WatcherTable.prototype.setRowData =function ($http) {
    // set up a mock server - real code will not do this, it will contact your
    // real server to get what it needs
    var mockServer = new MockServer();
    $http.get('data.json').then(function(response){
        mockServer.init(response.data);
    });

    var viewportDatasource = new ViewportDatasource(mockServer);
    var that=this;
    this.table.api.setViewportDatasource(viewportDatasource);
    // put the 'size cols to fit' into a timeout, so that the scroll is taken into consideration
    setTimeout(function () {
        that.table.api.sizeColumnsToFit();
    }, 100);
}

и вызываем его, когда сетка готова:

onGridReady:WatcherTable.prototype.setRowData.bind(this,$http)

Почему сетка остается пустой?

Спасибо

Answer 1

У вас есть проблема с синхронизацией в вашем плункере - ваш MockServer пытается обработать данные до того, как они станут доступны.

Чтобы решить эту проблему, нужно сделать две вещи. Первая - попытаться установить источник данных только после того, как данные станут доступны в MockServer:

WatcherTable.prototype.setRowData = function ($http) {
    // set up a mock server - real code will not do this, it will contact your
    // real server to get what it needs
    var mockServer = new MockServer();
    var that = this;
    $http.get('data.json').then(function (response) {
        mockServer.init(response.data);
        var viewportDatasource = new ViewportDatasource(mockServer);
        that.table.api.setViewportDatasource(viewportDatasource);
        // put the 'size cols to fit' into a timeout, so that the scroll is taken into consideration
        setTimeout(function () {
            that.table.api.sizeColumnsToFit();
        }, 100);
    });
}

Во-вторых, в соответствии с той же темой, вы должны предотвратить попытки периодических обновлений обрабатывать данные до того, как они будут готовы. Здесь вы можете либо запускать периодические обновления ПОСЛЕ того, как данные станут доступны, или, проще говоря, добавить проверку, прежде чем пытаться использовать ее:

MockServer.prototype.periodicallyUpdateData = function() {
    if(!this.allData) return;

Я раздвоил ваш плункер (с указанными выше изменениями) здесь: https://plnkr.co/edit/cY30aHIPydVOjcihX8Zh?p=preview