ag-grid-ng2顯示錯誤「Can not read property'slice'of undefined in [gridOptions」

Question

我想在我的angular 2項目中使用ag-grid-ng2。我正在按照插件網站上提供的步驟進行操作。以下是我如何實施該示例。

這是我的部分，我需要電網

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

我有類似的問題。但我使用數據源。如果我在與columndefs同時設置數據源的情況下觸發此錯誤（方法gridOptions.api.setColumnDefs（）可能會異步執行某些操作）。我認爲，當ngOnInit被調用時，網格還沒有準備好。試試做這個.getUsers（）;在gridReady事件處理程序中。