更新 : 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)的更多相关文章

  1. Angular2学习笔记(1)

    Angular2学习笔记(1) 1. 写在前面 之前基于Electron写过一个Markdown编辑器.就其功能而言,主要功能已经实现,一些小的不影响使用的功能由于时间关系还没有完成:但就代码而言,之 ...

  2. Angular2学习笔记——NgModule

    在Angular2中一个Module指的是使用@NgModule修饰的class.@NgModule利用一个元数据对象来告诉Angular如何去编译和运行代码.一个模块内部可以包含组件.指令.管道,并 ...

  3. angular2 学习笔记 ( rxjs 流 )

    RxJS 博大精深,看了好几篇文章都没有明白. 范围牵扯到了函数响应式开发去了... 我对函数式一知半解, 响应式更是第一次听到... 唉...不过日子还是得过...混着过先呗 我目前所理解的很浅,  ...

  4. angular2 学习笔记 ( ngModule 模块 )

    2016-08-25, 当前版本是 RC 5. 参考 : https://angular.cn/docs/ts/latest/guide/ngmodule.html 提醒 : 这系列笔记的 " ...

  5. Angular2学习笔记(1)——Hello World

    1. 写在前面 之前基于Electron写过一个Markdown编辑器.就其功能而言,主要功能已经实现,一些小的不影响使用的功能由于时间关系还没有完成:但就代码而言,之前主要使用的是jQuery,由于 ...

  6. Angular2学习笔记——路由器模型(Router)

    Angular2以组件化的视角来看待web应用,使用Angular2开发的web应用,就是一棵组件树.组件大致分为两类:一类是如list.table这种通放之四海而皆准的通用组件,一类是专为业务开发的 ...

  7. Angular2学习笔记——Observable

    Reactive Extensions for Javascript 诞生于几年前,随着angular2正式版的发布,它将会被更多开发者所认知.RxJs提供的核心是Observable对象,它是一个使 ...

  8. Angular2学习笔记——在子组件中拿到路由参数

    工作中碰到的问题,特此记录一下. Angular2中允许我们以`path\:id\childPath`的形式来定义路由,比如: export const appRoutes: RouterConfig ...

  9. angular2 学习笔记 ( Form 表单 )

    refer : https://angular.cn/docs/ts/latest/guide/forms.html https://angular.cn/docs/ts/latest/cookboo ...

随机推荐

  1. codechef Turbo Sort 题解

    Input t – the number of numbers in list, then t lines follow [t <= 10^6].  Each line contains one ...

  2. centos 网站目录权限参考

    Linux下Apache网站目录读写权限的设置 网站目录文件权限的设置对网站的安全至关重要,下面简单介绍网站目录文件权限的基本设定. 我们假设http服务器运行的用户和用户组是www,网站用户为cen ...

  3. TopCoder SRMS 1 字符串处理问题 Java题解

    Problem Statement   Let's say you have a binary string such as the following: 011100011 One way to e ...

  4. 清理yum源

    最近想在美国VPS上装个Wine 可是在执行yum install wine时却遇到了意想不到的错误 系统提示: You could try using –skip-broken to work ar ...

  5. Qt 学习之路:QStringListModel

    上一章我们已经了解到有关 list.table 和 tree 三个最常用的视图类的便捷类的使用.前面也提到过,由于这些类仅仅是提供方便,功能.实现自然不如真正的 model/view 强大.从本章起, ...

  6. Java语言基础(八)

    Java语言基础(八) 一.数学运算  + - * /  % (1)凡是byte  short  char类型都按int类型的计算   看看上面的代码,为什么出错! 我已经将100转成byte类型,( ...

  7. iOS的内存管理

    在Objective-C 这种面向对象的语言里,内存管理是个重要的概念.要想用一门语言写出内存使用效率高而且又没有bug的代码,就得掌握其内存管理模型的种种细节. 一旦理解了这些规则,你就会发现,其实 ...

  8. MAC 环境下 初始化新的mysql root 密码

    mac 环境下初始化mysql的root密码 关掉mysql服务,打开系统设置最后的mysql,然后将mysql先关掉 生成一个文件命名mysql-init,文件中放入:一句话,这句话不同版本不一样, ...

  9. PHP 中xampp不能启动服务器的问题

    有时候别人电脑上面的XAMPP,你把安装文件拷贝下来后,会发现,自己的电脑上用不了 这个时候有很多种情况 1. 关闭你自己电脑上有可能暂用80端口的程序 2.D:\xampp\apache\conf\ ...

  10. Win7设置承载网络 分类: 网络 2014-10-30 09:08 105人阅读 评论(0) 收藏

    Win7设置承载网络 (1)最重要的第一步,要知道自己的网卡是否支持承载网络,如果不支持就悲剧地一票否决了,支持的话才能开始以后各步骤的设置. netsh wlan show drivers (2)设 ...