Angular Grid ag-grid columnDefs Динамически изменяются

У меня проблема с динамическим изменением columnDefs. Вот мои gridOptions:

$scope.gridOptions = {
        columnDefs: [],
        enableFilter: true,
        rowData: null,
        rowSelection: 'multiple',
        rowDeselection: true
    };

и когда я возвращаю данные с сервера:

$scope.customColumns = [];

$http.post('/Home/GetProducts', { tableName: 'TABLE_PRODUCT' }).success(function (data) {
    angular.forEach(data.Columns, function (c) {
        $scope.customColumns.push(
            {
                headerName: c.Name,
                field: c.Value,
                width: c.Width
            }
        );
    });

    $scope.gridOptions.columnDefs = $scope.customColumns;

    $scope.gridOptions.rowData = data.Products;
    $scope.gridOptions.api.onNewRows();
}).error(function () {

});

Примечание: здесь c - объект столбца, который исходит от сервера.

При динамическом создании столбцов и присваивании ему $scope.gridOptions.columnDefs существует пустая сетка, но массив $scope.customColumns заполняется с помощью прав генерируемых объектов столбца. Пожалуйста, помогите мне, эта ошибка, или я делаю что-то неправильно?

Ответы

Ответ 1

В ag-grid столбцы в gridOptions используются один раз при инициализации сетки. Если вы измените столбцы после инициализации, вы должны указать сетку. Это делается путем вызова gridOptions.api.setColumnDefs()

Подробности этого метода API приведены в документации ag-grid здесь.

Ответ 2

Я думаю, что это уже исправлено.

Я могу сделать что-то подобное сейчас с последними угловыми и ag-grid. Обратите внимание, что здесь я использую ngxs, однако это все еще указывает на возможность получить асинхронные определения столбцов, поскольку я получаю определения столбцов на основе имен свойств данных, которые возвращаются из серверной части в этом случае rowData.

Во-первых, я получаю данные строки из внутреннего API. Затем при получении я выполняю операции в столбце "Выбрать для", которые сопоставляют заголовки возвращаемых данных со свойствами.

Данные не будут отображаться без заголовков, как только они появятся, будет перерисована сетка со всеми определениями столбцов и данными.

<ag-grid-angular 
    style="width: 100%; height: 500px;" 
    class="ag-theme-balham"
    [rowData]="rowData$ | async" 
    [columnDefs]="columnsDefs$ | async"
    >
</ag-grid-angular>


export class AgGridComponent {
    @Select(MyState.getColumnDefs) public columnsDefs$!: Observable<ReadonlyArray<any>>;

    @Select(MyState.getRowData) public rowData$!: Observable<ReadonlyArray<any>>;
}