更新 : 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. DateTime格式大全

    DateTime dt = DateTime.Now;//    Label1.Text = dt.ToString();//2005-11-5 13:21:25//    Label2.Text = ...

  2. leetcode-1 Two Sum 找到数组中两数字和为指定和

     问题描写叙述:在一个数组(无序)中高速找出两个数字,使得两个数字之和等于一个给定的值.如果数组中肯定存在至少一组满足要求. <剑指Offer>P214(有序数组) <编程之美& ...

  3. git 工具

    https://www.kernel.org/pub/software/scm/git/ wget https://www.kernel.org/pub/software/scm/git/git-2. ...

  4. poj1066

    很好的一道题.题意是,一个正方形围墙内有一些交错的内墙,内墙的端点都在正方形上,在正方形内部有一个点,求从正方形外到这个点的最少要走的门数,门只能是线段的中点. 思路很巧妙,因为从一个点到终点不可能“ ...

  5. git常见指令

    master : 默认开发分支: origin : 默认远程版本库 初始化操作    $ git config -global user.name <name> #设置提交者名字    $ ...

  6. ASP.NET MVC 第三回 Controller与View

    这节我们让ASP.NET MVC真正的跑起来 一.新建Controller 首先我们自己新建一个新的Controller在Controllers上点右键,添加,Controller选项   之后出现一 ...

  7. Stream流的读取使用

    这个是在现在的项目里,用到的知识点,一般用不到这些..所以想着还是记下来以后用. 针对文本流 //StreamReader sr = new StreamReader(mystream,Encodin ...

  8. android listview 替代品recyclerview详解

    安卓v7支持包下的ListView替代品————RecyclerView   RecyclerView这个控件也出来很久了,相信大家也学习的差不多了,如果还没学习的,或许我可以带领大家体验一把这个艺术 ...

  9. Chrome浏览器允许跨域请求配置

    最近有个做数据标注的任务,但是标注平台是别人公司的,他们又不愿意对平台进行升级改造: 其实要改的地方也很简单,就是对页面做一些处理,做一些脚本控制. 没办法,做了个 iframe 给她嵌入到我们自己的 ...

  10. reflact中GetMethod方法的使用

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.R ...