Rumah >hujung hadapan web >tutorial js >在Angular中有关管道操作符(|)用法

在Angular中有关管道操作符(|)用法

亚连
亚连asal
2018-06-20 15:54:142844semak imbas

通常我们需要使用管道实现对数据的格式化,下面这篇文章主要给大家介绍了关于Angular中管道操作符(|)的使用方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧。

管道是什么?

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

一、模板表达式操作符

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

二、管道操作符 (|)

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

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

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

Angular 的常用内置管道函数:

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

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

使用方法

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

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

常用实例:

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

ts 属性:

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

显示结果:

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

在Angular中如何实现显示输入内容

在Angular中如何实现查询天气预报

在js中如何判断节假日

在JS中如何实现留言板功能

在nodejs中如何实现OAuth2.0授权服务认证

在webpack上如何搭建vue项目

在vue中如何实现阅读全文

在vue中如何获取dom元素

在js中如何实现转换时间戳格式

在nginx上部署vue项目(详细教程)

在ionic3中如何实现随机布局瀑布流

Atas ialah kandungan terperinci 在Angular中有关管道操作符(|)用法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn