Wie wird die ag-grid-API in der angle2-Anwendung initialisiert?
Ich arbeite an einer Anwendung, die mit angular2 mit Typoskript erstellt wurde. Ich verwende ag-grid, um Daten im Raster anzuzeigen, kann aber die Raster-API nicht finden.
/// <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);
}
}
}
}
Nun, wenn ich versuche, eine Methode von this.gridOptions.api auszuführen, wird der Fehler ausgegeben, dass "gridOptions.api undefiniert ist. Beispiele auf ag-gridSeite? ˅ funktionieren nicht für typescript und angular2.
Wie kann ich gridApi in angular2 mit typescript initialisieren und verwenden?