如何在angular2应用程序中初始化Ag-Grid API [英] How to initialize ag-grid api in angular2 application
问题描述
我正在使用使用angular2和打字稿构建的应用程序。
我正在使用ag-grid在网格中显示数据,但是找不到网格API。
I am working on an application built using angular2 with typescript. I am using ag-grid to display data in grid but not able to find the 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", 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);
}
}
}
}
现在,当我尝试执行this.gridOptions.api的任何方法时,会抛出错误 gridOptions.api未定义。 -grid 网站不适用于打字稿和angular2。
Now when I am trying to execute any method of this.gridOptions.api it is throwing error that "gridOptions.api is undefined. Examples mentioned on ag-grid site are not working for typescript and angular2.
如何在带有打字稿的angular2中初始化和使用gridApi?
How can I initialize and use gridApi in angular2 with typescript?
推荐答案
您想将 gridOptions
初始化为类的属性,而不仅是变量,因此应为 this.gridOptions
:
You want to initialize gridOptions
as a property of the class, not just a variable. So it should be this.gridOptions
:
constructor(private _heroService: HeroService) {
console.log("in Grid constructor...");
this.columnDefs = [
{ headerName: "ID", field: "id", sortingOrder: ["asc", "desc"], editable: false, width: 100 },
{ headerName: "Name", field: "name", sortingOrder: ["asc", "desc"], editable: false, hide: false }
];
this._heroService.getHeroes().then(heroes => this.rowData = heroes);
this.gridOptions = {
enableSorting: true,
rowData: this.rowData,
columnDefs: this.columnDefs,
onReady: () => {
this.gridOptions.api.sizeColumnsToFit();
alert(this.gridOptions.api);
}
}
}
这篇关于如何在angular2应用程序中初始化Ag-Grid API的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!