Angular中管道操作符(|)的使用方法
2017-12-15 11:44
603 查看
管道是什么?
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; } }
显示结果:
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。
您可能感兴趣的文章:
相关文章推荐
- php smarty模版引擎中变量操作符及使用方法
- Linux操作系统中的管道(pipe)使用方法
- 2011-05-26 18:33 有名管道通信原理及系统调用mkfifo()的使用方法
- 如何使用==操作符,Equals方法,ReferenceEquals方法,IEquatable接口比较2个对象
- 流的特殊用法之管道流的使用方法案例
- python使用点操作符访问字典(dict)数据的方法
- wall的使用方法(配合管道)
- linux中的重定向和管道的使用方法
- Python中使用.format方法替代格式化操作符%
- 如何使用请求管道中事件实现自定义方法
- 无名管道pipe使用方法
- angular2中数据绑定方法总结和管道使用
- Angular2的管道Pipe的使用方法
- 管道的三种使用方案中,唯一正确而安全的使用方法
- sybase数据管道使用方法
- .NET Core中间件的注册和管道的构建(3) ---- 使用Map/MapWhen扩展方法
- php smarty模版引擎中变量操作符及使用方法
- 标准的I/O和管道使用方法
- php smarty模版引擎中变量操作符及使用方法
- 分页显示,linux环境,使用管道方法