ag-grille gridOptions.api indéfini dans angulaire 2

Je suis en train ag-grille dans angular2 avec tapuscrit, pour certaines raisons, je ne suis pas en mesure d'utiliser l'ag-grille d'Api, d'obtenir non défini erreur.,

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

Veuillez en informer, 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
    }
}

OriginalL'auteur Sankaranarayanan | 2016-11-03

ag-grid angular

6

La gridOptions api sera mise en place et prêt à utiliser une fois que la grille de l' gridReady événement a été appelé.

Sur la ligne que vous faites des tests pour elle, gridOptions est juste un Objet vide, et même après cela:
```
this.gridOptions = <GridOptions>{
     columnDefs: this.columnDefs(),
     ...other lines
```
Ne parvenez toujours pas à avoir l'api disponibles - crochet dans le gridReady ou angulaire du ngOnInit événements et vous serez en mesure d'appeler l'api en toute sécurité.

Merci à vous deux pour vos réponses., onGridReady() { console.journal( ce.gridOptions.api); // ici ça fonctionne comme ça.selectedRows = ce.gridOptions.l'api.getSelectedRows(); console.journal(ce.selectedRows); } private testClick(event): void { try { console.journal( ce.gridOptions.api); // ici, donne cette erreur.selectedRows = ce.gridOptions.l'api.getSelectedRows(); console.journal(ce.selectedRows); //erreur disant: undefined } merci de m'aider sur cette question intéressante
Quand testClick appelée? Est-il axé sur l'utilisateur?
Il ne fonctionne pas pour moi. Je peux exécuter cette onGridReady ou même ngOnInit et encore API est pas défini ;c

OriginalL'auteur Sean Landsman
6

Deux questions...

Tout d'abord ,comme d'autres l'ont mentionné, l'initialisation d'une référence à la grille de l'api dans onGridReady comme
```
onGridReady(params) {
    this.gridApi = params.api;
}
```
Deuxièmement, lors de l'ag-grille appelle l'un de vos fourni des gestionnaires (E. g. rowClicked), this n'est plus votre angulaire instance de composant, de sorte que dans votre testClick() méthode this.gridOptions === undefined.

Pour accéder aux propriétés de votre angulaire composant dans un AgGrid de rappel d'Événement que vous devriez passer this via GridOptions.context comme ceci:
```
this.gridOptions = <GridOptions>{
     context: {parentComponent: this},
     ...other lines
```
AgGrid événements (généralement) renvoyer une référence à cet objet de contexte dans le Cas params..
```
rowClicked(rowClicked: RowClickedEvent) {
    const localGridApiRef = rowClicked.context.parentComponent.gridApi;

    //do stuff with the grid api...
    const selectedRows = localGridApiRef.getSelectedRows();
};
```
Note: je ne suis pas sûr de savoir comment vous avez utilisé testClick() mais mon rowClicked() seraient interchangeables-je m'attendre...

Note 2 - Le GridApi est en fait une propriété de RowClickedEvent, de sorte que lors de l'obtention par l'intermédiaire de l'objet de contexte comme le montre le superflu, elle illustre le fait que l'accès aux propriétés et méthodes de votre angulaire de la composante de l'ag de la grille événement peut être fait via AgGridEvent's context propriété.

Celui-ci est correct, quand je reçois GridApi de params sur onGridReady de rappel alors c'est bien

OriginalL'auteur mounds
0

C'est à cause de la composante cycle de vie. Dans constructor il n'est pas encore initialisé. (Je suis en supposant que vous avez attribué à gridOptions objet de votre grille correctement.)

Essayez de l'utiliser dans
```
ngOnInit() { 
    console.log(this.gridOptions.api)
}
```
À partir de la documentation

ngOnInit Initialiser la directive/composant après Angulaire de la première
affiche les données liée à des propriétés et des jeux de la directive du composant
propriétés d'entrée.

Obtenir plus d'informations sur le cycle de vie de ici.

OriginalL'auteur Sefa

-1

Essayez ceci:

export class MyComponent implements OnInit {
  selected = () => console.log('ID: ', this.gridOptions.api.getSelectedRows()[0].id);

  gridOptions: GridOptions = {
    columnDefs: [
        {headerName: 'ID', field: 'id', width: 80},
        { ... }
    ],
    rowSelection: 'single'
  }

  ngOnInit() {
    this.gridOptions.rowData = this.gridData;
    this.gridOptions.onSelectionChanged - this.selected;
  }

Il a travaillé pour moi!

OriginalL'auteur Guenther

Vous devez vous connecter pour publier un commentaire.