web-dev-qa-db-ja.com

Angular Grid ag-grid columnDefs Dynamically change

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配列には、正しい生成列オブジェクトが格納されます。このバグを助けてください、または私が何か間違っていますか？

angularjsag-grid
14
Vaso Beruashvili

Ag-gridでは、gridOptionsの列がグリッドの初期化で1回使用されます。初期化後に列を変更する場合、グリッドに通知する必要があります。これは、gridOptions.api.setColumnDefs()を呼び出すことにより行われます

このapiメソッドの詳細は ag-grid documentation here で提供されています。

42
Niall Crosby

これはすでに修正されていると思います。

現在、最新のangularとag-gridを使用してこのようなことを行うことができます。ここでngxsを使用していることに注意してください。ただし、これは、この場合は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>>;
}
0
vsarunov