更新 : 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. Light OJ 1114 Easily Readable 字典树

    题目来源:Light OJ 1114 Easily Readable 题意:求一个句子有多少种组成方案 仅仅要满足每一个单词的首尾字符一样 中间顺序能够变化 思路:每一个单词除了首尾 中间的字符排序 ...

  2. android 49 广播接收者中启动其他组件

    main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" andro ...

  3. android 19 activity纵横屏切换的数据保存与恢复

    Bundle类:竖屏的activity换到横屏的activity的时候,会把竖屏的activity杀掉横屏的activity创建,竖屏的activity会有一些计算结果,可以用数据存起来,存到内存里面 ...

  4. 设置div中文字超出时自动换行

    一.对于div强制换行1.(IE浏览器)white-space:normal; word-break:break-all;这里前者是遵循标准.#wrap{white-space:normal; wid ...

  5. mssql 创建触发器

    MS-SMS里创建触发器: 首先右击表内的触发器文件夹图标 然后输入触发器创建指令,一下案例:(添加创建时间) 创建: SET ANSI_NULLS ON GO SET QUOTED_IDENTIFI ...

  6. mvc form

    当点击提交按钮后,想在Controll里取到Form里的数据. 必须在控件上设置name属性 例如<input type='text',name='userId'/>, 在controll ...

  7. Web通信中的Get、Post方法

    首先我们要了解Tomcat,Tomcat 服务器是一个免费的开放源代码的Web 应用服务器,属于轻量级应用服务器,在中小型系统和并发访问用户不是很多的场合下被普遍使用,是开发和调试JSP 程序的首选. ...

  8. Orace数据库锁表的处理与总结<摘抄与总结三>

    当Oracle数据库发生TX锁等待时,如果不及时处理常常会引起Oracle数据库挂起,或导致死锁的发生,产生ORA-60的错误. TX锁等待的分析 Oracle数据库中一般使用行级锁. 当Oracle ...

  9. 解决ld: warning: directory not found for option警告

    去掉警告的办法如下: 1选择工程, 编译的 (targets) 2选择 Build Settings 菜单 3查找 Library Search Paths 和 Framework Search Pa ...

  10. iOS单例的两种实现

    单例模式算是开发中比较常见的一种模式了.在iOS中,单例有两种实现方式(至少我目前只发现两种).根据线程安全的实现来区分,一种是使用@synchronized,另一种是使用GCD的dispatch_o ...