【问题标题】:How to initialize ag-grid api in angular2 application如何在 angular2 应用程序中初始化 ag-grid api
【发布时间】:2016-05-17 18:17:44
【问题描述】:

我正在开发一个使用 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。

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

【问题讨论】:

标签: angular typescript ag-grid


【解决方案1】:

您希望将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);
        }
    }
}

【讨论】:

  • 对于棘手的开箱即用自动高度,请在模板中使用domLayout='autoHeight'&lt;ag grid-ng2 ... domLayout='autoHeight'&gt;&lt;/ag-grid-ng2&gt;
【解决方案2】:

上面的“几乎”让我在 ang 2 rc1 中到达那里,但我发现我也需要 html 中的网格选项链接,所以

<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 :)

【讨论】:

    【解决方案3】:

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

    constructor 中,您正在为该方法本地的 gridOptions 变量分配一个值。

    但是,您与网格绑定的 gridOptions 是类级别的变量,它是 undefined。所以你得到一个错误。所以修改代码如下。

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2019-08-23
      • 2018-07-29
      • 2020-08-13
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2013-07-02
      相关资源
      最近更新 更多