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 ...
随机推荐
- linux 同步备份 rsyncd 相关设置
17:25 2013/10/18------------------ rsync linux 同步备份服务器 配置vi /etc/rsyncd.conf 配置文件 /usr/bin/rsync --d ...
- ReentrantLock与synchronized的差别
总的来说,lock更加灵活. 主要同样点:Lock能完毕synchronized所实现的全部功能 不同: 1.ReentrantLock功能性方面更全面,比方时间锁等候,可中断锁等候,锁投票等,因此更 ...
- [转] Python特殊语法:filter、map、reduce、lambda
Python内置了一些非常有趣但非常有用的函数,充分体现了Python的语言魅力! filter(function, sequence):对sequence中的item依次执行function(ite ...
- Myeclipse快捷键的设置
- 编程基础-msdn编程指南笔记
此博仅为笔记,摘自msdn编程指南文档,链接地址:http://msdn.microsoft.com/zh-cn/library/67ef8sbd.aspx 注释:// 单行注释 /* 多行注释*/ ...
- CSS样式权值
内联样式表(InLine style)>内部样式表(Internal style sheet)>外部样式表(External style sheet) 例外:但如果外部样式表放在内部样式表 ...
- 单例模式,多种实现方式JAVA
转载请注明出处:http://cantellow.iteye.com/blog/838473 第一种(懒汉,线程不安全): public class Singleton { private stati ...
- mybatis for .net
MyBatis For .NET学习笔记:开篇 http://chenkai.blog.51cto.com/2023960/763806 MyBatis For .NET学习笔记[2]:配置环境 ht ...
- Objective-C 实例方法可见度,方法
一 实例方法可见度,方法 1.实例变量的可见度 可见度 特点 ...
- SSL VPN 详解
SSL VPN是专栏VPN系列技术原理的最后一篇,SSL VPN作为远程接入型的VPN,已经具备非常广阔的前景,它的主要适应场景是取代L2TP Over IPSec,但功能要比L2TP Over IP ...