Question

我正在使用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。< / p>

如何在angular2中使用打字稿初始化和使用gridApi？

Answer 1

以上几乎＆＃39;让我在ang 2 rc1，但我发现我需要html中的Grid Options链接以及

<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();
         }
     };
 }

这完美地工作，并且当窗口移动时网格调整大小。感谢dfsq，因为我不会使用方便的onGridReady：）

Answer 2

您希望将gridOptions初始化为类的属性，而不仅仅是变量。所以它应该是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 3

在您的ts文件中，有一个在类级别声明的 gridOptions 变量。 var gridOptions;但是您没有为其分配任何值。所以它是未定义。

在构造函数内部，您为该方法本地的 gridOptions 变量分配一个值。

但是，您与网格绑定的 gridOptions 是类级别的变量，未定义。因此，您遇到了错误。因此，如下修改代码。

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

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

3 个答案: