我正在使用angular2和typescript构建的应用程序.
我正在使用ag-grid在网格中显示数据,但无法找到网格api.
我正在使用ag-grid在网格中显示数据,但无法找到网格api.
/// <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",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);
}
}
}
}
现在,当我尝试执行this.gridOptions.api的任何方法时,它会抛出错误“gridOptions.api未定义.ag-grid site上提到的示例不适用于typescript和angular2.
如何在angular2中使用typescript初始化和使用gridApi？
解决方法
您希望将gridOptions初始化为类的属性,而不仅仅是变量.所以它应该是this.gridOptions：
constructor(private _heroService: HeroService) {
console.log("in Grid constructor...");
this.columnDefs = [
{ headerName: "ID",hide: false }
];
this._heroService.getHeroes().then(heroes => this.rowData = heroes);
this.gridOptions = {
enableSorting: true,onReady: () => {
this.gridOptions.api.sizeColumnsToFit();
alert(this.gridOptions.api);
}
}
}
