更新 : 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. php开发工具zendstudio13破解补丁

    io?  Intelligent Code Editor Robust Debugging Capabilities Eclipse Ecosystem Mobile: AngularJS, Ioni ...

  2. 用.class文件创建对象

    第一步:  给你一个编译好的class文件以及它的包名,创建一个对象出来. 1)class文件源代码 package com.wsc.classloader; public class Tool{ p ...

  3. Qt的皮肤设计(Style Sheet)

      Qt的皮肤设计,也可以说是对Qt应用程序的界面美化,Qt使用了一种类CSS的样式规则QSS. 一.Style Sheet的应用 1.直接在程序代码中设置样式,利用setStyleSheet()方法 ...

  4. 在Ubuntu 12.10 上安装部署Openstack

    OpenStack系统有几个关键的项目,它们能够独立地安装但是能够在你的云计算中共同工作.这些项目包括:OpenStack Compute,OpenStack Object Storage,OpenS ...

  5. (转)JavaScript判断浏览器类型及版本

    IE 只有IE支持创建ActiveX控件,因此她有一个其他浏览器没有的东西,就是ActiveXObject函数.只要判断window对象存在ActiveXObject函数,就可以明确判断出当前浏览器是 ...

  6. aliyun云服务器硬件性能测试

    1.所购买阿里云服务器信息 2.dd命令测试 3.

  7. one way WebService

    WSDL支持4种消息交换方式:   1)单向(One-way):服务端接收消息:   2)请求响应(Request-response):服务端点接收请求消息,然后发送响应消息:   3)要求应答(So ...

  8. IE8下ckeditor无法正常使用,提示"例外被抛出且未被接住"的解决办法

    <script language="javascript" src="ckeditor/ckeditor.js"></script> & ...

  9. 第一次用Github desktop(mac)提交代码遇到的问题

    1.新建代码仓库 2.生成密钥 ssh-keygen -C 'your@email.address' -t rsa 3.到根目录下的.ssh文件夹下找到id_rsa.pub文件,将里面的内容复制到下图 ...

  10. C# string转int

    1,int转成string用toString 或者Convert.toString()如下 例如:int varInt = 1; string varString = Convert.ToString ...