AG-그리드 gridOptions.api 내가, 타이프 라이터와 angular2에 AG-그리드를 시도하고 몇 가지 이유로 내가 정의되지 않은 오류가의 AG-그리드 API를 사용할 수 없습니다입니다 각 2

Question

에서 정의되지 않은. 여기

입니다 코드 ..

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 문서

에서

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

에서 사용하십시오 데이터 바인딩 된 속성을 정의하고 지시문/구성 요소의 입력 속성 인 을 설정합니다.

here에 대한 자세한 정보를 확인하십시오.

Answer 2

gridOptions 그리드의 gridReady 이벤트가 호출되면 API가 설정되어 사용할 준비가됩니다. 당신이 그것을 테스트하는 선에서

는 gridOptions는 빈 객체이며, 당신이 후에도이 :

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

은 아직 사용할 수있는 API를 필요가 없습니다 - gridReady 나에 후크를 angle의 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; 
    } 

그것은 나를 위해 일한!