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

Question

我正在开发一个使用 angular2 和打字稿构建的应用程序。我正在使用 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 中提到的示例不适用于打字稿和 angular2。

如何使用 typescript 在 angular2 中初始化和使用 gridApi？

Answer 1

您想将 gridOptions 初始化为 class 的属性，而不仅仅是一个变量。所以应该是 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);
        }
    }
}

Answer 2

上面的 'almost' 让我到达了 ang 2 rc1 但我发现我也需要 html 中的网格选项 link 所以

<ag-grid-ng2 id="mastergrid" #agGrid style="height: 100%; width:100%" class="ag-fresh"
         [gridOptions]="gridOptions" 
                [columnDefs]="columnDefs" 
                [showToolPanel]="showToolPanel" 
                [rowData]="rowData" 
                enableSorting 
                enableRangeSelection:true
                suppressRowClickSelection
                enableFilter  
                toolPanelSuppressValues 
                toolPanelSuppressGroups
                debug="false"
                draggable="false"
                rowHeight="22" 
                rowSelection='multiple'> 
        </ag-grid-ng2>

和

ngOnInit(){
     this.gridOptions = <GridOptions>{
        onGridReady: () => {
             this.gridOptions.api.sizeColumnsToFit();
         }
     };
 }

这非常有效，随着 window 的移动，网格的大小也随之调整。感谢 dfsq，因为我也不会使用方便的 onGridReady :)

Answer 3

在你的 ts 文件中有一个 gridOptions 变量在 class 级别声明。 var gridOptions; 但是您没有为其分配任何值。所以它是 undefined.

在 constructor 中，您正在为该方法本地的 gridOptions 变量赋值。

然而，您与网格绑定的 gridOptions 是 class 级别变量，即 undefined。所以你得到一个错误。所以修改代码如下。

constructor(private _heroService: HeroService) {
    ....
    this.gridOptions = {
        enableSorting: true,
        rowData: this.rowData,
        ....

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

How to initialize ag-grid api in angular2 application

typescript

ag-grid

angular