angular2 学习笔记 (Pipes)
更新 : 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)的更多相关文章
- Angular2学习笔记(1)
Angular2学习笔记(1) 1. 写在前面 之前基于Electron写过一个Markdown编辑器.就其功能而言,主要功能已经实现,一些小的不影响使用的功能由于时间关系还没有完成:但就代码而言,之 ...
- Angular2学习笔记——NgModule
在Angular2中一个Module指的是使用@NgModule修饰的class.@NgModule利用一个元数据对象来告诉Angular如何去编译和运行代码.一个模块内部可以包含组件.指令.管道,并 ...
- angular2 学习笔记 ( rxjs 流 )
RxJS 博大精深,看了好几篇文章都没有明白. 范围牵扯到了函数响应式开发去了... 我对函数式一知半解, 响应式更是第一次听到... 唉...不过日子还是得过...混着过先呗 我目前所理解的很浅, ...
- angular2 学习笔记 ( ngModule 模块 )
2016-08-25, 当前版本是 RC 5. 参考 : https://angular.cn/docs/ts/latest/guide/ngmodule.html 提醒 : 这系列笔记的 " ...
- Angular2学习笔记(1)——Hello World
1. 写在前面 之前基于Electron写过一个Markdown编辑器.就其功能而言,主要功能已经实现,一些小的不影响使用的功能由于时间关系还没有完成:但就代码而言,之前主要使用的是jQuery,由于 ...
- Angular2学习笔记——路由器模型(Router)
Angular2以组件化的视角来看待web应用,使用Angular2开发的web应用,就是一棵组件树.组件大致分为两类:一类是如list.table这种通放之四海而皆准的通用组件,一类是专为业务开发的 ...
- Angular2学习笔记——Observable
Reactive Extensions for Javascript 诞生于几年前,随着angular2正式版的发布,它将会被更多开发者所认知.RxJs提供的核心是Observable对象,它是一个使 ...
- Angular2学习笔记——在子组件中拿到路由参数
工作中碰到的问题,特此记录一下. Angular2中允许我们以`path\:id\childPath`的形式来定义路由,比如: export const appRoutes: RouterConfig ...
- angular2 学习笔记 ( Form 表单 )
refer : https://angular.cn/docs/ts/latest/guide/forms.html https://angular.cn/docs/ts/latest/cookboo ...
随机推荐
- php开发工具zendstudio13破解补丁
io? Intelligent Code Editor Robust Debugging Capabilities Eclipse Ecosystem Mobile: AngularJS, Ioni ...
- 用.class文件创建对象
第一步: 给你一个编译好的class文件以及它的包名,创建一个对象出来. 1)class文件源代码 package com.wsc.classloader; public class Tool{ p ...
- Qt的皮肤设计(Style Sheet)
Qt的皮肤设计,也可以说是对Qt应用程序的界面美化,Qt使用了一种类CSS的样式规则QSS. 一.Style Sheet的应用 1.直接在程序代码中设置样式,利用setStyleSheet()方法 ...
- 在Ubuntu 12.10 上安装部署Openstack
OpenStack系统有几个关键的项目,它们能够独立地安装但是能够在你的云计算中共同工作.这些项目包括:OpenStack Compute,OpenStack Object Storage,OpenS ...
- (转)JavaScript判断浏览器类型及版本
IE 只有IE支持创建ActiveX控件,因此她有一个其他浏览器没有的东西,就是ActiveXObject函数.只要判断window对象存在ActiveXObject函数,就可以明确判断出当前浏览器是 ...
- aliyun云服务器硬件性能测试
1.所购买阿里云服务器信息 2.dd命令测试 3.
- one way WebService
WSDL支持4种消息交换方式: 1)单向(One-way):服务端接收消息: 2)请求响应(Request-response):服务端点接收请求消息,然后发送响应消息: 3)要求应答(So ...
- IE8下ckeditor无法正常使用,提示"例外被抛出且未被接住"的解决办法
<script language="javascript" src="ckeditor/ckeditor.js"></script> & ...
- 第一次用Github desktop(mac)提交代码遇到的问题
1.新建代码仓库 2.生成密钥 ssh-keygen -C 'your@email.address' -t rsa 3.到根目录下的.ssh文件夹下找到id_rsa.pub文件,将里面的内容复制到下图 ...
- C# string转int
1,int转成string用toString 或者Convert.toString()如下 例如:int varInt = 1; string varString = Convert.ToString ...