ag-grid gridOptions.api undefined in angular 2

问题

I am trying ag-grid in angular2 with typescript, for some reasons I am not able to use the ag-grid APIs, getting undefined error.,

here is the 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

Please advise, Thanks

Updated with code in comment below

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

回答1:

The gridOptions api will be set and ready to use once the grid's gridReady event has been called.

At the line you're testing for it, gridOptions is just an empty Object, and even after you do this:

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

It still won't have the api available - hook into the gridReady or angular's ngOnInit events and you'll be able to invoke the api safely.

回答2:

Two issues...

First ,as others have mentioned, initialise a reference to the grid api in onGridReady like so

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

Secondly, when ag-grid calls one of your provided handlers (E.g. rowClicked), this is no longer your angular component instance, so in your testClick() method this.gridOptions === undefined.

To access properties of your angular component in an AgGrid Event callback you should pass this via GridOptions.context like this:

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

AgGrid's events (generally) return a reference to this context object in the Event params..

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

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

Note: I'm not sure how you used testClick() but my rowClicked() would be interchangeable I expect...

Note 2 - The GridApi is actually a property of RowClickedEvent, so while getting it via the context object as shown is superfluous, it illustrates the point that accessing properties/methods of your angular component in an ag grid event can be done via AgGridEvent's context property.

回答3:

It's because of component lifecycles. In constructor it's not initialized yet. (I'm assuming you assigned gridOptions object to your grid properly.)

Try using it in

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

From the documentation

ngOnInit Initialize the directive/component after Angular first displays the data-bound properties and sets the directive/component's input properties.

Get more info about lifecycles here.

回答4:

Try this:

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

It worked for me!

回答5:

I was using vue.js Had same issue. But when I included :gridOptions="gridOptions" in my ag-grid-vue component that solved my problem

回答6:

I was looking for an answer on this while using AngularJS. For anyone else who ends up in the same issue as me (though it was not an AngularJS specific issue), I found that I was not calling the table correctly in the HTML. Since the table was never being called, the api was never getting set up and gridReady was never running. Syntax I used that worked:

<div class="table-body">
  <div ag-grid="$ctrl.gridOptions" class="ag-theme-fresh ag-grid-container"></div>
</div>

来源：https://stackoverflow.com/questions/40395466/ag-grid-gridoptions-api-undefined-in-angular-2

标签

angular

ag-grid