web-dev-qa-db-fra.com

Angular Grid ag-grid columnDefs Dynamically change

J'ai un problème concernant le changement dynamique de columnDefs. Voici ma grilleOptions:

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

et quand je récupère les données du serveur:

$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 () {

});

Remarque: ici c est un objet colonne qui vient du serveur.

Lors de la génération dynamique de colonnes et de son affectation à $ scope.gridOptions.columnDefs, il y a une grille vide mais $scope.customColumns le tableau est rempli d'objets de colonne générés à droite. S'il vous plaît, aidez-moi est ce bug ou je fais quelque chose de mal?

angularjsag-grid
14
Vaso Beruashvili

Dans ag-grid, les colonnes de gridOptions sont utilisées une fois lors de l'initialisation de la grille. Si vous modifiez les colonnes après l'initialisation, vous devez en informer la grille. Cela se fait en appelant gridOptions.api.setColumnDefs()

Les détails de cette méthode api sont fournis dans la documentation ag-grid ici .

42
Niall Crosby

Je pense que cela a déjà été corrigé.

Je suis capable de faire quelque chose comme ça maintenant avec le dernier angular et ag-grid. Veuillez noter que j'utilise ngxs ici, mais cela indique toujours la possibilité d'obtenir les définitions de colonne asynchrones au fur et à mesure que je reçois la colonne est définie en fonction des noms de propriété des données renvoyées par le backend dans ce cas, rowData.

Tout d'abord, je récupère les données de ligne à partir de l'API back-end. Ensuite, quand il est récupéré, j'effectue des opérations dans la colonne Sélectionner pour qui mappent les en-têtes des données renvoyées aux propriétés.

Les données ne seront pas affichées sans en-têtes, dès que les en-têtes seront là, elles redessineront la grille avec toutes les définitions de colonne et les données.

<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