Angular中管道操作符(|)的使用方法


Posted in Javascript onDecember 15, 2017

管道是什么?

Angular的管道可以看作成是一个数据格式化展示的工具。管道可以将数据格式化显示,而不改变源数据。比如关于日期的展示,对于源数据使用管道1可以以yyyy/MM/dd来展示,也可以使用管道2展示成Feb 28, 2017的形式。但原数据依然是date,并没有改变。利用管道我们可以将数据格式化的内容剥离出来,使之独立,有需要格式化展示的时候选择相应的管道进行处理即可。

一、模板表达式操作符

模板表达式语言使用了JavaScript 语法的子集,并补充了几个用于特定场景的特殊操作符:管道操作符、安全导航操作符。

二、管道操作符 (|)

在绑定之前,表达式的结果可能需要一些转换。例如,可能希望吧数字显示成金额、强制文本变成大写,或者过滤列表以及进行排序。

Angular 管道对象这样的小型转换来说是个很方便的选择。

管道是一个简单的函数,它接受一个输入值,并返回转换结果。

Angular 的常用内置管道函数:

DatePipe,UpperCasePipe,LowerCasePipe,CurrencyPipi,PercentPipe,JsonPipe等。

它们用于模板表达式中,只要使用管道操作符(|) 就行了。

使用方法

管道操作符会把它左侧的表达式结果传给它右侧的管道函数。还可以通过多个管道串联表达式。

<div> 
 Title through a pipe chain: 
 {{title | uppercase | lowercase}} 
</div>

常用实例:

<div class="alert alert-warning"> 
 <p>{{title|uppercase }}</p> 
 <p>{{title|uppercase|lowercase }}</p> 
 <p>{{this|json}}</p> 
 <p>{{time|date:'yyyy-MM-dd'}}</p> 
 <p>{{number|percent}}</p> 
 <p>{{number|currency:'CNY'}}</p> 
</div>

ts 属性:

export class AppComponent { 
 title = 'app'; 
 name = '张三丰'; 
 time = new Date(); 
 number = 1.123; 
 show(str: string) { 
 str += '---测试'; 
 return str; 
 } 
}

显示结果:

Angular中管道操作符(|)的使用方法

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascript 模拟JQuery的Ready方法实现并出现的问题
Dec 06 Javascript
IE6下js通过css隐藏select的一个bug
Aug 16 Javascript
js封装的textarea操作方法集合(兼容很好)
Nov 16 Javascript
Js event事件在IE、FF兼容性问题
Jan 01 Javascript
javascript去掉代码里面的注释
Jul 24 Javascript
js数组去重的方法汇总
Jul 29 Javascript
JS基于面向对象实现的选项卡效果示例
Dec 20 Javascript
详解angularjs中的隔离作用域理解以及绑定策略
May 31 Javascript
select自定义小三角样式代码(实用总结)
Aug 18 Javascript
JS中Attr的用法详解
Oct 09 Javascript
JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
Jul 10 Javascript
vue发送websocket请求和http post请求的实例代码
Jul 11 Javascript
浅谈Vue SPA 首屏加载优化实践
Dec 15 #Javascript
利用VS Code开发你的第一个AngularJS 2应用程序
Dec 15 #Javascript
Angular2开发环境搭建教程之VS Code
Dec 15 #Javascript
JavaScript原生实现观察者模式的示例
Dec 15 #Javascript
基于javascript 显式转换与隐式转换(详解)
Dec 15 #Javascript
ReactNative中使用Redux架构总结
Dec 15 #Javascript
Angular中使用MathJax遇到的一些问题
Dec 15 #Javascript
You might like
基于文本的搜索
2006/10/09 PHP
用DBSQL类加快开发MySQL数据库程序的速度
2006/10/09 PHP
PHP登录验证码的实现与使用方法
2016/07/07 PHP
Yii框架的redis命令使用方法简单示例
2019/10/15 PHP
javascript+css 网页每次加载不同样式的实现方法
2009/12/27 Javascript
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
2010/08/12 Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
2012/01/13 Javascript
如何制作浮动广告 JavaScript制作浮动广告代码
2012/12/30 Javascript
模拟jQuery中的ready方法及实现按需加载css,js实例代码
2013/09/27 Javascript
javascript操作excel生成报表全攻略
2014/05/04 Javascript
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
2014/05/11 Javascript
php+ajax+jquery实现点击加载更多内容
2015/05/03 Javascript
JS仿JQuery选择器功能
2017/03/08 Javascript
Bootstrap缩略图的创建方法
2017/03/22 Javascript
jQuery 实现图片的依次加载图片功能
2017/07/06 jQuery
bootstrap table插件的分页与checkbox使用详解
2017/07/23 Javascript
vue中post请求以a=a&amp;b=b 的格式写遇到的问题
2018/04/27 Javascript
小程序实现列表展开收起效果
2020/07/29 Javascript
JavaScript实现动态生成表格
2020/08/02 Javascript
Vue项目中使用mock.js的完整步骤
2021/01/12 Vue.js
Vue看了就会的8个小技巧
2021/01/21 Vue.js
使用webpack和rollup打包组件库的方法
2021/02/25 Javascript
[46:38]完美世界DOTA2联赛PWL S2 Magma vs PXG 第三场 11.28
2020/12/02 DOTA
Python enumerate遍历数组示例应用
2008/09/06 Python
Python+matplotlib实现华丽的文本框演示代码
2018/01/22 Python
解决Python pandas plot输出图形中显示中文乱码问题
2018/12/12 Python
css3 伪元素和伪类选择器详解
2014/09/04 HTML / CSS
css3实例教程 一款纯css3实现的发光屏幕旋转特效
2014/12/07 HTML / CSS
跨域修改iframe页面内容详解
2019/10/31 HTML / CSS
优秀干部获奖感言
2014/01/31 职场文书
计算机应届毕业生自荐信范文
2014/02/23 职场文书
企业安全生产演讲稿
2014/05/09 职场文书
党的群众路线教育实践活动个人自我剖析材料
2014/10/07 职场文书
亮剑观后感500字
2015/06/05 职场文书
幼儿园园长新年寄语
2015/08/17 职场文书
Nginx利用Logrotate实现日志分割
2022/05/20 Servers