ag-grid-ng2显示错误“Cannot read property 'slice‘of undefined in [gridOptions”

Question

我正在尝试将ag-grid-ng2用于我的angular 2项目。我正在按照插件网站上提供的步骤进行操作。下面是我是如何实现这个示例的。

这是我需要网格的组件

import {Component, OnInit} from "angular2/core";
import {MockService} from "../services/mock.service";
import {Hero} from "../mockdata";
import {AgGridNg2} from "ag-grid-ng2/main";
import {GridOptions} from "ag-grid/main";

@Component({
    selector:'my-home',
    templateUrl:'templates/myHome.tpl.html',
    directives:[AgGridNg2],
    providers:[MockService]
})

export class myHomeComponent implements OnInit{
    users:Hero[];
    selectedUser:Hero[];
    private gridOptions: GridOptions;
    private showGrid: boolean;
    private rowCount: string;
    private columnDefs: any[];

    constructor(private _mockService:MockService){}

    getUsers() {
        //this.users = this._mockService.getUserList();
        this._mockService.getUserList().then(users => this.users = users);
    }

    constructor()
    {
        this.gridOptions = <GridOptions>{};
        this.createColumnDefs();
        this.showGrid = true;
    }

    ngOnInit() {
        this.getUsers();
    }

    onSelect(user: Hero) { this.selectedUser = user; }
    createColumnDefs()  {
        this.columnDefs =[ { headerName: "ID", field: "id"},
            { headerName: "User Name", field: "name"}
        ]

    }
}

这是我的html

<ag-grid-ng2
        class="ag-fresh"
        style="width:100%; height:400px; margin-bottom:20px;"
        [gridOptions]="gridOptions"
        [columnDefs]="columnDefs"
        [rowData]="users"

        enableColResize
        enableSorting
        rowSelection="single"
        suppressCellSelection
        rowHeight="26"
        (rowClicked)="onRowClicked($event)">
</ag-grid-ng2>

让我知道代码是怎么回事。

Answer 1

我也遇到过类似的问题。但我使用的是数据源。如果我在设置列定义的同时设置数据源(方法gridOptions.api.setColumnDefs()可能异步执行某些操作)，则会触发此错误。我认为当调用ngOnInit时，网格还没有准备好。尝试在gridReady事件处理程序中执行this.getUsers()；。