2017-04-19 41 views
0

將這兩行的依賴列表中package.json喜歡拿數據網格模板無法爲角度2.4.1版本找到合適的角度數據網格?

以上兩行補充後運行安裝NPM下載與AG-電網的依賴。 然後添加的代碼到組件的數據網格

import {Component} from 'angular2/core'; 
import {AgGridNg2} from 'ag-grid-ng2/main'; 

@Component({ 
    selector: 'my-datatable', 
    directives: [AgGridNg2], 
    template: ` 
     <ag-grid-ng2 #agGrid style="height:100%;width:845px" class="ag-fresh" 
      [gridOptions]="gridOptions"> 
     </ag-grid-ng2 > 
    ` 
}) 

export class AppComponent { 
    myRowData = [ 
     {"name":"Ronald Bowman","country":"China","city":"Lutou","email":"[email protected]"}, 
     {"name":"Pamela Hill","country":"Russia","city":"Krylovskaya","email":"[email protected]"}, 
     {"name":"Robin Andrews","country":"Ukraine","city":"Korop","email":"[email protected]"}, 
     {"name":"Peter Kim","country":"Mexico","city":"San Jose","email":"[email protected]"}, 
     {"name":"Carol Foster","country":"Mexico","city":"El Aguacate","email":"[email protected]"}, 
     {"name":"Jimmy Burke","country":"Indonesia","city":"Banjarsari","email":"[email protected]"}, 
     {"name":"Jonathan Crawford","country":"Peru","city":"Alca","email":"[email protected]"}, 
     {"name":"Donald Montgomery","country":"Poland","city":"Działoszyce","email":"[email protected]"}, 
     {"name":"Donna Shaw","country":"Japan","city":"Akune","email":"[email protected]"}, 
     {"name":"Helen King","country":"United States","city":"Hollywood","email":"[email protected]"}, 
     {"name":"Walter Myers","country":"China","city":"a ndaowa n", "email":"[email protected]"}, 
     {"name":" Alice Collins","country":"Papua Nw Guine a", "city":"Mendi","email":"[email protected]"}, 
     {"name":"Anne Richards","country":"China","city":"Koramlik","email":"[email protected]"}, 
     {"name":"Randy Miller","country":"Indonesia","city":"Trenggulunan","email":"[email protected]"}, 
     {"name":"Phillip Adams","country":"Bahamas","city":"Duncan Town","email":"[email protected]"}, 
     {"name":"Nicholas Allen","country":"Philippines","city":"Bautista","email":"[email protected]"}, 
     {"name":"Lisa Willis","country":"Thailand","city":"Lat Yao","email":"[email protected]"}, 
     {"name":"Jeffrey Castillo","country":"Indonesia","city":"Karangsari","email":"[email protected]"}, 
     {"name":"Michael Carpenter","country":"Colombia","city":"Cali","email":"mcarpenter[email protected]"}, 
     {"name":"Roger Lee","country":"France","city":"Courtaboeuf","email":"[email protected]"}, 
     {"name":"Steve Wallace","country":"Russia","city":"Novobeysugskaya","email":"[email protected]"}, 
     {"name":"Shirley Patterson","country":"Peru","city":"La Tinguiña","email":"[email protected]"}, 
     {"name":"Nancy Ward","country":"Sweden","city":"Båstad","email":"[email protected]"} 
    ]; 

    columnDefs = [ 
     {headerName: 'Name', field: "name", width: 200 }, 
     {headerName: 'Country', field: "country" ,width:180}, 
     {headerName: 'City', field: "city" ,width:160}, 
     {headerName: 'e-mail', field: "email" ,width:300} 
    ]; 

    gridOptions = []; 

    constructor() { 
     this.gridOptions = { 
      rowData: this.myRowData, 
      columnDefs: this.columnDefs, 
      enableColResize: true, 
      enableSorting: true, 
      enableFilter: true 
     } 
    } 
} 

得到錯誤"cannot find module angular2/core"但我發現它的不兼容版本..有沒有用角2.4.1版本兼容的任何數據網格。

+0

你試過https://material.angular.io/components/component/grid-list或https://www.primefaces.org/primeng/#/datatable –

回答

0

您是否嘗試過使用primeng數據表?

有很好的文檔記錄和偉大的功能,如過濾器,crud,模板。

https://www.primefaces.org/primeng/#/datatable

+0

做我們需要增加它在依賴和它是否兼容角2.4.1版本 –

+0

NPM安裝primeng - 保存。 https://www.primefaces.org/primeng/#/setup這是安裝,是的,它將與角2.4.1兼容。 primeng將是自從他們開始早期開發以來的最好成績注意:安裝應該自動添加依賴項 –