先上自己实现的效果图:
我是用ionic2写的项目,要做的功能是根据返回的数据,动态控制绿色部分的显示(主要控制top 和 height,以及里面展示的内容), 基于angular 2的语法. 这里我说下过滤器吧:
1. 自定义管道 pipe.
2.可以在[ngStyle]中使用自定义管道吗?
第一点 自定义pipe. ................这些东西都可以搜到的. 不论是看官方文档 还是 百度搜 ......
切回我们的重点, angular 2在ng-style中可以使用过滤器filter吗?
答案肯定是可以的.
一开始 我
<div [ngStyle]="{'top':{{item.startTime | bookingTime}}}"> 无奈 报错
然后又:
<div style="top:{{item.startTime | bookingTime}}"> 无奈 还不对
更奇葩的是,我竟然想把拿到的值扔到input中 用 ng-model 双向数据绑定实现把值传递给定义的变量保存.然后在读取这个变量............ 哈哈 ,幸好我没这样试.
最后 用最终的这种格式,顺利的实现了.
<div [ngStyle]="{'top':(item.startTime|bookingTime)}">
bookingTime 是我自定义管道. 主要处理时间戳,根据时间 控制显示的高度的. 拷贝的时候如果有报错 就试试 | 两端加上或者去掉空格.. 我现在这个格式是正确的.
