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 ...
随机推荐
- codechef Turbo Sort 题解
Input t – the number of numbers in list, then t lines follow [t <= 10^6]. Each line contains one ...
- centos 网站目录权限参考
Linux下Apache网站目录读写权限的设置 网站目录文件权限的设置对网站的安全至关重要,下面简单介绍网站目录文件权限的基本设定. 我们假设http服务器运行的用户和用户组是www,网站用户为cen ...
- TopCoder SRMS 1 字符串处理问题 Java题解
Problem Statement Let's say you have a binary string such as the following: 011100011 One way to e ...
- 清理yum源
最近想在美国VPS上装个Wine 可是在执行yum install wine时却遇到了意想不到的错误 系统提示: You could try using –skip-broken to work ar ...
- Qt 学习之路:QStringListModel
上一章我们已经了解到有关 list.table 和 tree 三个最常用的视图类的便捷类的使用.前面也提到过,由于这些类仅仅是提供方便,功能.实现自然不如真正的 model/view 强大.从本章起, ...
- Java语言基础(八)
Java语言基础(八) 一.数学运算 + - * / % (1)凡是byte short char类型都按int类型的计算 看看上面的代码,为什么出错! 我已经将100转成byte类型,( ...
- iOS的内存管理
在Objective-C 这种面向对象的语言里,内存管理是个重要的概念.要想用一门语言写出内存使用效率高而且又没有bug的代码,就得掌握其内存管理模型的种种细节. 一旦理解了这些规则,你就会发现,其实 ...
- MAC 环境下 初始化新的mysql root 密码
mac 环境下初始化mysql的root密码 关掉mysql服务,打开系统设置最后的mysql,然后将mysql先关掉 生成一个文件命名mysql-init,文件中放入:一句话,这句话不同版本不一样, ...
- PHP 中xampp不能启动服务器的问题
有时候别人电脑上面的XAMPP,你把安装文件拷贝下来后,会发现,自己的电脑上用不了 这个时候有很多种情况 1. 关闭你自己电脑上有可能暂用80端口的程序 2.D:\xampp\apache\conf\ ...
- Win7设置承载网络 分类: 网络 2014-10-30 09:08 105人阅读 评论(0) 收藏
Win7设置承载网络 (1)最重要的第一步,要知道自己的网卡是否支持承载网络,如果不支持就悲剧地一票否决了,支持的话才能开始以后各步骤的设置. netsh wlan show drivers (2)设 ...