【发布时间】:2016-05-17 18:17:44
【问题描述】:
我正在开发一个使用 angular2 和 typescript 构建的应用程序。 我正在使用 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", 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 未定义。ag-grid site 中提到的示例不适用于 typescript 和 angular2。
如何使用 typescript 在 angular2 中初始化和使用 gridApi?
【问题讨论】:
-
你考虑过 PrimeNG DataTable 吗?它是 Angular2 的原生组件。 primefaces.org/primeng/#/datatable
标签: angular typescript ag-grid