angular2 学习笔记 (Pipes)
更新 : 2019-09-01
number 和 currency pipe
当我们要出美美的数字的时候就会用到了。
什么叫美美 ?
比如十万, 100000 or 100,000
哪个好一点 ? 后的丫,有逗号隔开了密密的 0
这时候就要使用 | number 了
最常用的是 | number: '0.2-4', 意思是小数点前面最少一个数字, 小数点后最少 2 个最多 4 个数字.
| currency: 'RM': 'symbol' : '0.2-4'
Pipe 就是 ng1 的 filter
<pre>{{ jsonValue | json }}</pre>
用法看这里就很清楚了 : https://angular.cn/docs/ts/latest/guide/pipes.html
要记得 pipe 尽量用 pure 的 (ng1 叫 stateful)
pure 只有在 value changed 才会触发 ( object, array 的话要换引用哦 )
如果要用 impure 的话 (比如做 curreny convert or translate) 要自己 take care 性能哦.
async pipe
{{ value$ | async | myPipe }}
今天 async pipe 后面又接了自己的 pipe, 结果发现 async 还是很聪明的, 给我的是值而不是 Obserable. 嘻嘻,我多虑了.
angular2 学习笔记 (Pipes)的更多相关文章
- Angular2学习笔记(1)
Angular2学习笔记(1) 1. 写在前面 之前基于Electron写过一个Markdown编辑器.就其功能而言,主要功能已经实现,一些小的不影响使用的功能由于时间关系还没有完成:但就代码而言,之 ...
- Angular2学习笔记——NgModule
在Angular2中一个Module指的是使用@NgModule修饰的class.@NgModule利用一个元数据对象来告诉Angular如何去编译和运行代码.一个模块内部可以包含组件.指令.管道,并 ...
- angular2 学习笔记 ( rxjs 流 )
RxJS 博大精深,看了好几篇文章都没有明白. 范围牵扯到了函数响应式开发去了... 我对函数式一知半解, 响应式更是第一次听到... 唉...不过日子还是得过...混着过先呗 我目前所理解的很浅, ...
- angular2 学习笔记 ( ngModule 模块 )
2016-08-25, 当前版本是 RC 5. 参考 : https://angular.cn/docs/ts/latest/guide/ngmodule.html 提醒 : 这系列笔记的 " ...
- Angular2学习笔记(1)——Hello World
1. 写在前面 之前基于Electron写过一个Markdown编辑器.就其功能而言,主要功能已经实现,一些小的不影响使用的功能由于时间关系还没有完成:但就代码而言,之前主要使用的是jQuery,由于 ...
- Angular2学习笔记——路由器模型(Router)
Angular2以组件化的视角来看待web应用,使用Angular2开发的web应用,就是一棵组件树.组件大致分为两类:一类是如list.table这种通放之四海而皆准的通用组件,一类是专为业务开发的 ...
- Angular2学习笔记——Observable
Reactive Extensions for Javascript 诞生于几年前,随着angular2正式版的发布,它将会被更多开发者所认知.RxJs提供的核心是Observable对象,它是一个使 ...
- Angular2学习笔记——在子组件中拿到路由参数
工作中碰到的问题,特此记录一下. Angular2中允许我们以`path\:id\childPath`的形式来定义路由,比如: export const appRoutes: RouterConfig ...
- angular2 学习笔记 ( Form 表单 )
refer : https://angular.cn/docs/ts/latest/guide/forms.html https://angular.cn/docs/ts/latest/cookboo ...
随机推荐
- SecondarySort 原理
定义IntPair 以及 IntPair(first,second)的compareto,先比較first的大小,再比較second的大小 定义FirstPartitioner是为了让partitio ...
- 基于Tomcat7、Java、WebSocket的服务器推送聊天室
http://blog.csdn.net/leecho571/article/details/9707497 http://blog.fens.me/java-websocket-intro/ jav ...
- Kruskal算法模拟讲解
Kruskal 算法是一个求最小生成树的算法,即求最小的开销等 算法可以这样,要求得最小生成树,那么n个节点只能包括n-1条边 所以我们应该转换为寻找这最短的n-1条边,因此,可以先对所有的 边进行从 ...
- [AngularJS + Webpack] Requiring Templates
With Angular, most of the time you're specifying a templateUrl for your directives and states/routes ...
- android 31 GridView
GridView:网格列表,也支持适配器. package com.sxt.day05_01; import java.util.ArrayList; import java.util.List; i ...
- 判断IMEI或MEID是否合法
/*----------------------------------------------- * 判断此字串所代表的IMEI或MEID是否合法 * @param imei * @author H ...
- spring beans源码解读之--BeanFactory进化史
BeanFactory是访问bean容器的根接口,它是一个bean容器的基本客户端视图. 先让我们看看beanfactory的前生后世吧! beanFactory有四个重要的子接口: SimpleJn ...
- 【Android】退出运行了多个Activity的应用
日常开发APP的时候,绝大多数情况下会有多个Activity,而finish()方法只能结束掉一个Activity,那么,我们可以通过什么方法去退出整个Application呢? 根据各大牛的经验,有 ...
- iOS获取健康步数从加速计到healthkit
计步模块接触了一年多,最近又改需求了,所以又换了全新的统计步数的方法,整理一下吧. 在iPhone5s以前机型因为没有陀螺仪的存在,所以需要用加速度传感器来采集加速度值信息,然后根据震动幅度让其加入踩 ...
- "_Default"同时存在于两个dll文件中的解决办法
编译器错误消息:CS0433: 类型“_Default”同时存在于“c:\Windows\Microsoft.NET\Framework\v2.0.50727\Temporary ASP.NET Fi ...