如何在angular2应用程序中初始化ag-grid api

发布时间：2020-12-17 07:09:38 所属栏目：安全来源：网络整理

导读：我正在使用angular2和typescript构建的应用程序. 我正在使用ag-grid在网格中显示数据,但无法找到网格api. /// reference path="../../../typings/jquery/jquery.d.ts" /import {Component} from 'angular2/core';import {Hero,HeroService} from './hero.ser

我正在使用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",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);
        }
    }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!