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 特殊字符串
Feb 25 Javascript
JavaScript实现统计文本框Textarea字数增强用户体验
Dec 21 Javascript
JavaScript的递归之递归与循环示例介绍
Aug 05 Javascript
jquery ready(fn)事件使用介绍
Aug 21 Javascript
jquery 遍历数组 each 方法详解
May 25 Javascript
第七篇Bootstrap表单布局实例代码详解(三种表单布局)
Jun 21 Javascript
BootStrap表单控件之文本域textarea
May 23 Javascript
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
vue.js简单配置axios的方法详解
Dec 13 Javascript
js对象简介与基本用法示例
Mar 13 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
Nov 03 Javascript
JS代码实现页面切换效果
Jan 10 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
自己在做项目过程中学到的PHP知识收集
2012/08/20 PHP
zf框架的zend_cache缓存使用方法(zend框架)
2014/03/14 PHP
PHP 面向对象程序设计(oop)学习笔记 (五) - PHP 命名空间
2014/06/12 PHP
PHP模板解析类实例
2015/07/09 PHP
Laravel登录失败次数限制的实现方法
2020/08/26 PHP
Jquery 常用方法经典总结
2010/01/28 Javascript
JSQL  一个 web DB 的封装
2010/05/05 Javascript
javascript深入理解js闭包
2010/07/03 Javascript
关于jQuery中的each方法(jQuery到底干了什么)
2014/03/05 Javascript
JavaScript文本框脚本编写的注意事项
2016/01/25 Javascript
jQuery实现的文字hover颜色渐变效果实例
2016/02/20 Javascript
jQuery ajax全局函数处理session过期后的ajax跳转问题
2016/06/03 Javascript
利用JavaScript阻止表单提交的两种方法
2016/08/11 Javascript
详解jQuery中的事件
2016/12/14 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
2017/09/13 Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
2020/11/13 Javascript
Vue实现小购物车功能
2020/12/21 Vue.js
[01:07:13]TNC vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python中给List添加元素的4种方法分享
2014/11/28 Python
Python的Django应用程序解决AJAX跨域访问问题的方法
2016/05/31 Python
Python实现的求解最小公倍数算法示例
2018/05/03 Python
python代码 FTP备份交换机配置脚本实例解析
2019/08/01 Python
Python cookie的保存与读取、SSL讲解
2020/02/17 Python
彪马香港官方网上商店:PUMA香港
2020/12/06 全球购物
Eclipse面试题
2014/03/22 面试题
语文教学随笔感言
2014/02/18 职场文书
出纳员岗位职责风险
2014/03/06 职场文书
法人委托书范本
2014/04/04 职场文书
国旗下的讲话演讲稿
2014/05/08 职场文书
任命书范本大全
2014/06/06 职场文书
促销活动总结怎么写
2014/06/25 职场文书
介绍信范文大全
2015/05/07 职场文书
交通事故调解协议书
2015/05/20 职场文书
2016年领导干部正风肃纪心得体会
2015/10/09 职场文书
laravel ajax curd 搜索登录判断功能的实现
2021/04/17 PHP
python创建字典及相关管理操作
2022/04/13 Python