Angular Grid ag-grid columnDefs动态更改

Question

我有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数组中填充了右侧生成的列对象.请帮帮我是这个错误还是我做错了什么？

Answer 1

在ag-grid中,gridOptions中的列在网格初始化时使用一次.如果在初始化后更改列,则必须告知网格.这是通过调用完成的gridOptions.api.setColumnDefs()

此处的ag-grid文档中提供了此api方法的详细信息.

Answer 2

我认为这已经解决了。

我现在可以使用最新的 angular 和 ag-grid 做这样的事情。请注意，我在这里使用 ngxs，但是这仍然表明能够异步获取列定义，因为我正在根据从后端返回的数据的属性名称获取列 defs，在这种情况下，rowData。

首先，我从后端 API 获取行数据。然后当它被提取时，我在 Select for 列中执行操作，将标题从返回的数据映射到属性。

如果没有标题，数据将不会显示，一旦标题出现，它就会重新绘制包含所有列定义和数据的网格。

<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>>;
}