web-dev-qa-db-fra.com

ag-grid gridOptions.api indéfini dans angular 2

J'essaie ag-grid dans angular2 avec TypeScript. Pour certaines raisons, je ne parviens pas à utiliser les API ag-grid, ce qui entraîne une erreur non définie.,

voici le code ..,

import { AgRendererComponent } from 'ag-grid-ng2/main';
import { GridOptions, RowNode } from 'ag-grid/main';
import { GridOptionsWrapper } from 'ag-grid/main';
import { GridApi } from 'ag-grid/main';

public gridOptions: GridOptions;

constructor()
 {
    this.gridOptions = <GridOptions>{};

    alert(this.gridOptions);
    alert(this.gridOptions.api); // *** getting undefined  ***


    this.gridOptions = <GridOptions>{
        columnDefs: this.columnDefs(),
        rowData: this.rowData,
        onSelectionChanged: this.onSelectionChanged,
        groupSelectsChildren: true,
        suppressRowClickSelection: true,

        rowSelection: 'multiple',
        enableColResize: true,
        enableSorting: true,
        rowHeight: 45}

}//constructor

S'il vous plaît conseiller, merci 

Mis à jour avec le code en commentaire ci-dessous 

onGridReady() {
    console.log(this.gridOptions.api); // here it work
    this.selectedRows = this.gridOptions.api.getSelectedRows();
    console.log(this.selectedRows);
}

private testClick(event): void {
    try {
        console.log(this.gridOptions.api); // here gives error
        this.selectedRows = this.gridOptions.api.getSelectedRows();
        console.log(this.selectedRows); //getting error saying undefined
    }
}
angularag-grid
5
Sankaranarayanan

L'API gridOptions sera définie et prête à être utilisée une fois que l'événement gridReady de la grille aura été appelé.

Sur la ligne que vous testez, gridOptions est simplement un objet vide et même après l'avoir fait:

this.gridOptions = <GridOptions>{
     columnDefs: this.columnDefs(),
     ...other lines

L'API ne sera toujours pas disponible - connectez-vous aux événements gridReady ou ngOnInit d'angular et vous pourrez invoquer l'API en toute sécurité.

5
Sean Landsman

Deux problèmes ...

Tout d’abord, comme d’autres l’ont déjà mentionné, initialisez une référence à l’API de la grille dans onGridReady comme si

onGridReady(params) {
    this.gridApi = params.api;
}

Deuxièmement, lorsque ag-grid appelle l'un des gestionnaires fournis (par exemple, rowClicked), thisn'est plus votre instance de composant angulaire, donc dans votre méthode testClick(), this.gridOptions === undefined.

Pour accéder aux propriétés de votre composant angulaire dans un rappel d'événement AgGrid, vous devez passer thisvia GridOptions.context comme ceci:

this.gridOptions = <GridOptions>{
     context: {parentComponent: this},
     ...other lines

Les événements d'AgGrid retournent (généralement) une référence à cet objet de contexte dans les paramètres d'événement.

rowClicked(rowClicked: RowClickedEvent) {
    const localGridApiRef = rowClicked.context.parentComponent.gridApi;

    // do stuff with the grid api...
    const selectedRows = localGridApiRef.getSelectedRows();
};

Remarque: je ne suis pas sûr de savoir comment vous avez utilisé testClick() mais mon rowClicked() serait interchangeable.

Note 2 - Le GridApiest en fait une propriété de RowClickedEventname__. Ainsi, même s'il est superflu de l'obtenir via l'objet context, comme indiqué, il est possible d'accéder aux propriétés/méthodes de votre composant angulaire dans un événement de grille ag via AgGridEventname __ 's contextname__.

4
mounds

C'est à cause des cycles de vie des composants. Dans constructor ce n'est pas encore initialisé. (Je suppose que vous avez correctement assigné l'objet gridOptions à votre grille.)

Essayez de l'utiliser dans

ngOnInit() { 
    console.log(this.gridOptions.api)
}

De la documentation

ngOnInit Initialise la directive/composant après Angular en premier affiche les propriétés liées aux données et définit les propriétés d'entrée de la directive/composant.

Obtenez plus d’informations sur les cycles de vie ici .

0
Sefa