Ionic 2 花瓣 ..我爱编程

angular 2在ng-style中使用过滤器filter(自

2017-09-07  本文已影响58人  天亮前被寻找的一只猫

先上自己实现的效果图:

我是用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  是我自定义管道.    主要处理时间戳,根据时间 控制显示的高度的.  拷贝的时候如果有报错 就试试 | 两端加上或者去掉空格..  我现在这个格式是正确的.

上一篇 下一篇

猜你喜欢

热点阅读