如何在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屋！