Angular4 后台管理系统搭建(2) - flexgrid 单元格模板 wjFlexGridCellTemplate 的坑

时间:2021-11-23 00:41:44

这几天中了很多坑,尤其是两个大坑。先是运行环境的坑,在是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大小的下拉框,不放到分页器组件里了。另外想丰富分页器显示,就是循环排模板就可以,自己扩展就好。  Angular4 后台管理系统搭建(2) - flexgrid 单元格模板 wjFlexGridCellTemplate 的坑

表格内的跳转链接也实现了。详细代码是M2V2和M2V3组件。为此还整理了下整个项目的路由。

Angular4 后台管理系统搭建(2) - flexgrid 单元格模板 wjFlexGridCellTemplate 的坑