更新 : 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. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(29)-T4模版

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(29)-T4模版 这讲适合所有的MVC程序 很荣幸,我们的系统有了体验的地址了.演示地址 之前我们发布了一 ...

  2. oracle恢复被覆盖的存储过程

    假设你不小心覆盖了之前的存储过程,那得赶紧闪回,时长越长闪回的可能性越小.原理非常easy,存储过程的定义就是数据字典,改动数据字典跟改动普通表的数据没有差别,此时会把改动前的内容放到undo中,我们 ...

  3. [Redux] Navigating with React Router <Link>

    We will learn how to change the address bar using a component from React Router. In Root.js: We need ...

  4. 高级性能调试手段(oprofile+gprofile)+内核追踪手段:LTT

    http://blog.csdn.net/wlsfling/article/details/5876134http://www.lenky.info/archives/2012/03/1371http ...

  5. Qt c++11

    借助 Qt 5 的信号槽语法,我们可以将一个对象的信号连接到 Lambda 表达式,例如:     1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 // !!! Q ...

  6. Android(java)学习笔记205:网易新闻RSS客户端应用编写逻辑过程

    1.我们的项目需求是编写一个新闻RSS浏览器,RSS(Really Simple Syndication)是一种描述和同步网站内容的格式,是使用最广泛的XML应用.RSS目前广泛用于网上新闻频道,bl ...

  7. spring xml 空模板-applicationContext.xml

    <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.spr ...

  8. shell跑一个PHP脚本的简单命令

    最近在做一个刷数据库的小功能,需要批量添加到不同的表中,写好PHP文件之后,登录到某一个服务器上面 上传文件的命令:rz 会出现一个弹框可以选择要上传的文件 执行文件并报错误的命令:/usr/loca ...

  9. 版本控制-cvs

    我们实训用的是cvs. 团队协作: 代码版本控制软件:CVS.SVN.GIT(Git@开源中国) FTP:服务端.客户端 CVS: 服务端(源码仓库).客户端

  10. JAVA HashMap详细介绍和示例

    http://www.jb51.net/article/42769.htm 我们先对HashMap有个整体认识,然后再学习它的源码,最后再通过实例来学会使用HashMap.   第1部分 HashMa ...