本篇文章主要介绍了Angular4中常用管道,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

通常我们需要使用管道实现对数据的格式化,Angular4中的管道和之前有了一些变化,下面说一些常用的管道。

一、大小写转换管道

  • uppercase将字符串转换为大写
  • lowercase将字符串转换为小写
<p>将字符串转换为大写{{str | uppercase}}</p>
str:string = 'hello'

页面上会显示

将字符串转换为大写HELLO

二、日期管道

date。日期管道符可以接受参数,用来规定输出日期的格式。

<p>现在的时间是{{today | date:'yyyy-MM-dd HH:mm:ss'}}</p>
today:Date = new Date();

页面上会显示现在的时间是2017年05月08日10时57分53秒

三、小数管道

number管道用来将数字处理为我们需要的小数格式

接收的参数格式为{最少整数位数}.{最少小数位数}-{最多小数位数}

其中最少整数位数默认为1

最少小数位数默认为0

最多小数位数默认为3

当小数位数少于规定的{最少小数位数}时,会自动补0

当小数位数多于规定的{最多小数位数}时,会四舍五入

<p>圆周率是{{pi | number:'2.2-4'}}</p>
pi:number = 3.14159;

页面上会显示

圆周率是03.1416

四、货币管道

currency管道用来将数字转换为货币格式

<p>{{a | currency:'USD':false}}</p>
<p>{{b | currency:'USD':true:'4.2-2'}}</p>
a:number = 8.2515
b:number = 156.548

页面上将显示

USD8.25

0156.55这里的′USD′是美元UnitedStatesdollar的缩写,当为false时不显示符,当为true时,则显示$符。后面的规定小数位数的参数和上面介绍的一样。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持爱安网。

最新资讯
苹果暂免在Facebook上运行付费在线活动企业30%抽成至2020年底

苹果暂免在Facebook上

Facebook方面表示,在其iOS应用上运行付费在线活动的企
华为东莞基地着火现场:建筑位于团泊洼实验室 园区仍被封锁

华为东莞基地着火现场

此次失火的建筑系华为团泊洼实验室园区内的G2栋建筑,据
高瓴资本黄立明:平台企业无长久垄断,腾讯、阿里之外仍有大空间

高瓴资本黄立明:平台企

平台必须有原生的价值,这样的平台才会有自己“滚雪球”
亏损、还债!罗永浩“真还传”还得演,“直播电商最多占一半”

亏损、还债!罗永浩“真

9月23日晚,自称“脱口秀前辈”的罗永浩在《脱口秀大会
云端招聘不下线 高校毕业生路更宽

云端招聘不下线 高校

在新冠肺炎疫情影响下,能否找到称心如意的工作成为众多
蚂蚁战配基金搅动代销“江湖”

蚂蚁战配基金搅动代销

9月25日,5只参与蚂蚁集团战略配售的公募基金(简称“5只
最新文章
详解Vue的ref特性的使用

详解Vue的ref特性的使

这篇文章主要介绍了详解Vue的ref特性的使用,文中通过
vue学习笔记之slot插槽基本用法实例分析

vue学习笔记之slot插

这篇文章主要介绍了vue学习笔记之slot插槽基本用法,结
vue跳转方式(打开新页面)及传参操作示例

vue跳转方式(打开新页

这篇文章主要介绍了vue跳转方式(打开新页面)及传参操作,
vue学习笔记之过滤器的基本使用方法实例分析

vue学习笔记之过滤器

这篇文章主要介绍了vue学习笔记之过滤器的基本使用方
js获取本日、本周、本月的时间代码

js获取本日、本周、本

本篇文章给大家分享的内容是利用js如何获取本日、本周
node crawler如何添加promise支持

node crawler如何添加

这篇文章主要介绍了node crawler如何添加promise支持,