Angular管道操作符(|)
发布时间:2020-12-17 08:35:42 所属栏目:安全 来源:网络整理
导读:一、模板表达式操作符 模板表达式语言使用了JavaScript 语法的子集,并补充了几个用于特定场景的特殊操作符:管道操作符、安全导航操作符。 二、管道操作符 (|) 在绑定之前,表达式的结果可能需要一些转换。例如,可能希望吧数字显示成金额、强制文本变成大
一、模板表达式操作符 模板表达式语言使用了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 安全导航操作符(?.)和空属性路径 Angular2开发环境搭建之VS Code Angular CLI简介2 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |