Свяжите ag-grid с angular2 observable

Я пытаюсь загрузить данные в ag-grid, когда компонент загружается. Объединение примера на ag-grid github и ответ на этот вопрос У меня есть этот ngOnInit для моего компонента:

 ngOnInit(): void {
    this.promisesService.getPromises()
        .subscribe((s: Promise[]) => {
            console.log('got response:', s);

            this.gridOptions = {
                enableSorting: true,
                rowData: this.createRowData(),
                columnDefs: this.createColumnDefs(),
                onGridReady: () => {
                    this.gridOptions.api.sizeColumnsToFit();
                    console.log('ag-grid ready');
                }
            };

            console.log('options set:', this.gridOptions);
        });
}

Сетка застревает на «Загрузка ...» без сообщений об ошибках. GridOptions настроен правильно, а его rowData содержит все данные, которые я ожидал увидеть. Однако onGridReady никогда не запускается.

Если я перенесу настройку параметров за пределы подписки, она будет работать нормально:

ngOnInit(): void {
    this.promisesService.getPromises()
        .subscribe((s: Promise[]) => {
            console.log('got response:', s);

            console.log('options set:', this.gridOptions);
        });

    this.gridOptions = {
        enableSorting: true,
        rowData: this.createRowData(),
        columnDefs: this.createColumnDefs(),
        onGridReady: () => {
            this.gridOptions.api.sizeColumnsToFit();
            console.log('ag-grid ready');
        }
    };


}

В шаблоне я устанавливаю только параметры:

<ag-grid-ng2 #agGrid style="width: 100%; height: 200px;" class="ag-fresh" [gridOptions]="gridOptions"></ag-grid-ng2>

Я пробовал переместить код в конструктор и установить rowData в шаблоне, но это не помогло.

Что мне не хватает?

Спасибо


angular ag-grid
person Jason    schedule 20.09.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

По какой-то причине, если я устанавливаю параметры в конструкторе и оставляю выборку данных в Init, все работает нормально. Кто-нибудь знает причину, дайте мне знать:

export class PromisesListComponent {
private gridOptions: GridOptions;
promises: Promise[];

constructor(private promisesService: PromisesService) {
    this.gridOptions = {
        rowData: this.promises,
        columnDefs: this.createColumnDefs(),
        enableColResize: true,
        enableSorting: true,
        enableFilter: true,
        onGridReady: () => {
            this.gridOptions.api.sizeColumnsToFit();
        }
    }
}

ngOnInit(): void {
    this.promisesService.getPromises()
        .subscribe((response: Promise[]) => {
            this.promises = response;
        });
}

private createColumnDefs() {
    return [
        {
            headerName: "Agreement Code",
            field: "AgreementCode",
            width: 200
        }
    ];
}

}

person Jason    schedule 20.09.2016
comment
Я думаю, что проблема, с которой вы столкнулись, - это значение rowData. Это, я полагаю, предполагает наличие каких-то статических данных, готовых к этому моменту. Если вы используете обещания, лучше всего будет запускать функции gridOptions.api.setRowData() или gridOptions.api.setDatasource() внутри подписки. - person Jarod Moser; 20.09.2016