3

我正在开发一个使用 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网站上提到的示例不适用于 typescript 和 angular2。

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

4

3 回答 3

4

上面的“几乎”让我在 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 :)

于 2016-06-03T13:20:42.443 回答
3

您想初始化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);
        }
    }
}
于 2016-02-08T07:30:10.050 回答
0

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

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

但是，您与 grid 绑定的gridOptions是未定义的类级别变量。所以你得到一个错误。所以修改代码如下。

constructor(private _heroService: HeroService) {
    ....
    this.gridOptions = {
        enableSorting: true,
        rowData: this.rowData,
        ....
于 2018-07-19T05:38:56.523 回答