Angular4 后台管理系統搭建（2） - flexgrid 單元格模板 wjFlexGridCellTemplate 的坑

  這幾天中了很多坑，尤其是兩個大坑。先是運行環境的坑，在是flexgrid單元格內部模板的坑。這里記錄下。

  一開始我遇見一些很奇怪的問題，按網上的說法，別人這么寫代碼都正常，就在我機器上不正常。按以前的經驗，我覺得是不是版本的問題。於是就把 angular 升級到 4.2.4。 typescript升級到2.4.1。結果這兩個最新的庫合在一起，zone.js就出問題了。是一個很奇怪的類型轉換問題。上網搜索，一個老外也在問這個zone類型轉換的問題，但是沒人回答，發布時間當時比我搜索的時候早十個小時。后來沒辦法，把angular降為4.1.3。typescript降為2.3.4。是指定版本號重新安裝的。其余的zone，angular-cli，webpack都折騰一遍。把mac的運行環境整的很亂。不過好在恢復了。

 

  另一個就是flexgrid 的內部單元格模板，網上文章例子都是告訴我們這么用

<wj-flex-grid-column header="Country"
    binding="country"
    width="*">
    <template wjFlexGridCellTemplate [cellType]="'Cell'" *ngIf="customCell" #item="item">
        <img src="resources/{ {item.country}}.png" />
        { {item.country}}
    </template>
    <template wjFlexGridCellTemplate [cellType]="'GroupHeader'" *ngIf="customGroupHeader" #item="item" #cell="cell">
        <input type="checkbox" [(ngModel)]="cell.row.isCollapsed" />
        { {item.name}} ({ {item.items.length}} items)
    </template>
  </wj-flex-grid-column>

比如上面的代碼就出自 wijmo5官網的技術文章，地址是 http://wijmo.com/blog/best-angular-2-data-grid-flexgrid/  

  但實際上在angular4里。上面的單元格內部模板，在程序運行到  #item="item" 或者 #cell="cell" 這的時候。就會出錯。 {{item.name}} 這樣的動態數據也取不出來。我也是找了好久。最后找到在angular4 。想使用單元格內部模板，即wjFlexGridCellTemplate 。正確的使用方法應該是

       <wj-flex-grid-column [header]="'選項名稱'" [binding]="'indexname'" [width]="200">
          <ng-template wjFlexGridCellTemplate [cellType]="'Cell'"  let-cell="cell"
                 <div><a [routerLink]="['/business/m2/m2v3',cell.item.indexcode]">{{cell.item.indexname}}</a></div>
          </ng-template>
       </wj-flex-grid-column>

　　需要使用{{cell.item.indexname}} 這樣的格式。才能獲取整行的需要綁定數據。使用了單元格模板，就不能在 itemFormatter 函數內在對他動態格式化。

 

       項目的demo已經更新，地址是： http://121.42.203.123   這個需要登錄才可以進去；

       代碼已經更新到github上地址是   https://github.com/Vetkdf/yang-test.git

       

　　分頁測試頁面我上面加了一個選擇pagesize大小的下拉框，不放到分頁器組件里了。另外想豐富分頁器顯示，就是循環排模板就可以，自己擴展就好。  

 

  表格內的跳轉鏈接也實現了。詳細代碼是M2V2和M2V3組件。為此還整理了下整個項目的路由。