Como inicializar ag-grid api no aplicativo angular2
Estou trabalhando em um aplicativo criado usando angular2 com texto datilografado. Estou usando o ag-grid para exibir dados na grade, mas não é possível encontrar a API da grade.
/// <reference path="../../../typings/jquery/jquery.d.ts" />
import {Component} from 'angular2/core';
import {Hero, HeroService} from './hero.service';
var gridOptions;
var heroService;
import * as core from 'angular2/core';
declare var ag: any;
ag.grid.initialiseAgGridWithAngular2({ core: core });
@Component({
selector: 'gridapp',
template: `<ag-grid-ng2 #gapp class="ag-fresh" style="height: 300px; width:850px" [gridOptions]="gridOptions" [columnDefs]="columnDefs" [rowData]="rowData" enableSorting="true" enableColResize="true" enableFilter="true"></ag-grid-ng2>`,
directives: [(<any>window).ag.grid.AgGridNg2],
providers: [HeroService]
})
export class GridViewComponent {
private columnDefs: Object[];
private rowData: Object[];
constructor(private _heroService: HeroService) {
console.log("in Grid constructor...");
heroService = this._heroService;
this.columnDefs = [
{ headerName: "ID", field: "id", sortingOrder: ["asc", "desc"], editable: false, width: 100 },
{ headerName: "Name", field: "name", sortingOrder: ["asc", "desc"], editable: false, hide: false },
];
heroService.getHeroes()
.then(heroes =>
this.rowData = heroes
);
gridOptions = {
enableSorting: true,
rowData: this.rowData,
columnDefs: this.columnDefs,
onReady: function() {
gridOptions.api.sizeColumnsToFit();
alert(gridOptions.api);
}
}
}
}
Agora, quando estou tentando executar qualquer método deste.gridOptions.api, está lançando um erro que "gridOptions.api é indefinido. Exemplos mencionados no ag-gridlocal não estão funcionando para texto datilografado e angular2.
Como posso inicializar e usar gridApi em angular2 com texto datilografado?