AG-сетка gridOptions.api неопределенными в угловом 2

Question

Я пытаюсь AG-сетку в angular2 с машинописи, по некоторым причинам я не могу использовать API, AG-сетки, получить неопределенную ошибку.,

здесь код ..,

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 

Пожалуйста посоветуйте, спасибо

Обновленный с кодом в комментарии ниже

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

Answer 1

Это из-за компонентов жизненного цикла. В constructor он еще не инициализирован. (Я предполагаю, что вы назначены gridOptions объекта к сетке правильно.)

Попробуйте использовать его в

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

Из документации

ngOnInit Инициализировать директиву/компонент после угловых первых дисплеев связанные с данными свойства и задает свойства ввода директивы/компонента .

Получить больше информации о lifecycles here.

Answer 2

gridOptions api будет установлен и готов к использованию после того, как было вызвано событие сетки gridReady.

На линии вы тестируете его, gridOptions это просто пустой объект, и даже после того, как вы это делаете:

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

Он по-прежнему не будет иметь апи доступный - крючок в gridReady или angular's ngOnInit, и вы сможете безопасно использовать api.

Answer 3

Попробуйте это:

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

Он работал для меня!