本篇文章主要介绍了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时,则显示$符。后面的规定小数位数的参数和上面介绍的一样。

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

最新资讯
傅盛:与焦虑共生,更以焦虑反抗平庸

傅盛:与焦虑共生,更以焦

2008年,刚满30岁的傅盛离职,张颖看到这个消息,要来电话打
快手收购A站进军二次元,七亿老铁能容得下百万猴子吗?

快手收购A站进军二次

百万“猴子”终于有了新归宿,不是马云爸爸,不是“不站队
苹果WWDC大会发布了什么创新的功能?并没有

苹果WWDC大会发布了什

一场发布会的精彩程度,和演讲者说“isn't that cool”
为什么苹果CEO库克力捧这个10岁小程序员?

为什么苹果CEO库克力

这个有点臭屁、却笑的很腼腆的小孩,用了四年走完了别人
苹果发布新App Store规则:或针对Steam游戏平台

苹果发布新App Store

在拒绝了Steam的iPhone端应用之后,苹果于本周一发布了
拼多多不再低价?至少纸巾品类上是这样

拼多多不再低价?至少纸

以低价起家的拼多多,有望逐渐走出价格洼地。
最新文章
JS动画定时器知识总结

JS动画定时器知识总结

这篇文章给大家总结了关于JS动画中定时器的相关用法以
vue利用axios来完成数据的交互

vue利用axios来完成数

这篇文章主要介绍了vue利用axios来完成数据的交互,本
剖析Angular Component的源码示例

剖析Angular Componen

本篇文章主要介绍了剖析Angular Component的源码示例,
JS中原始值和引用值的储存方式示例详解

JS中原始值和引用值的

原始值指的是代表原始数据类型的值,也叫基本数据类型,引
JavaScript 五大常见函数

JavaScript 五大常见

在javascript前端开发中js函数问题经常会被讨论,这个问
Angular学习笔记之集成三方UI框架、控件的示例

Angular学习笔记之集

这篇文章主要介绍了Angular学习笔记之集成三方UI框架