浅谈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时，则显示$符。后面的规定小数位数的参数和上面介绍的一样。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Angular2的管道Pipe的使用方法

    管道Pipe可以将数据作为输入,然后按照规则将其转换并输出.在Angular2中有许多内置的Pipe,比如DatePipe.UpperCasePipe和CurrencyPipe等.在这里我们主要介绍如何自定义Pipe. 1. 管道定义 Pipe的定义如下代码所示: import { PipeTransform, Pipe } from '@angular/core'; /*users: Array<any> = [ { name: '1', id: 1 }, { name: '2', id:

  • 浅谈Angular4中常用管道

    通常我们需要使用管道实现对数据的格式化,Angular4中的管道和之前有了一些变化,下面说一些常用的管道. 一.大小写转换管道 uppercase将字符串转换为大写 lowercase将字符串转换为小写 <p>将字符串转换为大写{{str | uppercase}}</p> str:string = 'hello' 页面上会显示 将字符串转换为大写HELLO 二.日期管道 date.日期管道符可以接受参数,用来规定输出日期的格式. <p>现在的时间是{{today |

  • 浅谈Java中常用数据结构的实现类 Collection和Map

    线性表,链表,哈希表是常用的数据结构,在进行Java开发时,JDK已经为我们提供了一系列相应的类来实现基本的数据结构.这些类均在java.util包中.本文试图通过简单的描述,向读者阐述各个类的作用以及如何正确使用这些类. Collection ├List │├LinkedList │├ArrayList │└Vector │ └Stack └Set Map ├Hashtable ├HashMap └WeakHashMap Collection接口 Collection是最基本的集合接口,一个C

  • 浅谈python中常用的excel模块库

    浅谈python中常用的excel模块库

    openpyxl openpyxl是⼀个Python库,用于读取/写⼊Excel 2010 xlsx / xlsm / xltx / xltm⽂件. 它的诞⽣是因为缺少可从Python本地读取/写⼊Office Open XML格式的库. 如何安装: 使用pip安装openpyxl $ pip install openpyxl 使用效果之⼀: 比如可以直接读取表格数据后综合输出写⼊到后⾯的⼀列中 xlwings xlwings是BSD许可的Python库,可轻松从Excel调用Python,同样

  • 浅谈python中列表、字符串、字典的常用操作

    列表操作如此下: a = ["haha","xixi","baba"] 增:a.append[gg] a.insert[1,gg] 在下标为1的地方,新增 gg 删:a.remove(haha) 删除列表中从左往右,第一个匹配到的 haha del a.[0] 删除下标为0 对应的值 a.pop(0) 括号里不写内容,默认删除最后一个,写了,就删除对应下标的内容 改:a.[0] = "gg" 查:a[0] a.index(&q

  • 浅谈JS中的常用选择器及属性、方法的调用

    选择器.属性及方法调用的配合使用: <style> #a{ width: 200px; height: 100px; background-color: red; } .b{ width: 200px; height: 100px; background-color: green; } .div1{ width: 200px; height: 100px; background-color:aqua; } </style> <body> <div id="

  • 浅谈Java中几个常用集合添加元素的效率

    初始化需要进行比较的集合,统一增加10万个元素,获取整个过程的执行时间. 1.List集合增加元素 private static void testList() { List<Integer> list = new ArrayList<Integer>(); long startTime = System.currentTimeMillis(); // 获取开始时间 for (int i = 0; i < 100000; i++) { list.add(i); } long

  • 浅谈iOS中几个常用协议 NSCopying/NSMutableCopying

    1.几点说明 说到NSCopying和NSMutableCopying协议,不得不说的就是copy和mutableCopy. 如果类想要支持copy操作,则必须实现NSCopying协议,也就是说实现copyWithZone方法; 如果类想要支持mutableCopy操作,则必须实现NSMutableCopying协议,也就是说实现mutableCopyWithZone方法; iOS系统中的一些类已经实现了NSCopying或者NSMutableCopying协议的方法,如果向未实现相应方法的系

  • 浅谈angular4.0中路由传递参数、获取参数最nice的写法

    研究ng4的官网,终于找到了我想要的方法.我想要的结果是用'&'拼接参数传送,这样阅读上是最好的. 否则很多'/'的拼接,容易混淆参数和组件名称. 一般我们页面跳转传递参数都是这样的格式: http://angular.io/api?uid=1&username=moon 但是在SPA单页应用中却是下面的结果居多[初级视频都是这样敷衍的] http://angular.io/api/1/moon 那么怎么实现我说的结果呢? 重点开始了. 实现从product页面跳转到product-det

  • 浅谈Python中的常用内置对象

    浅谈Python中的常用内置对象

    一.常用的python内置对象 对象类型 类型名称 示例 简要说明 数字 int,float,complex 1234,3.14,3+4j 数字大小没有限制,内置支持复数及其运算 字符串 str 'swfu' 使用单引号.双引号.三引号作为定界符,以r/R引导表示原始字符串 字节串 bytes b'hello world' 以字母b引导,可以使用单引号.双引号.三引号作为定界符 列表 list [1,2,3] 所有元素放在[ ]中,元素之向使用","分隔,其中的元素可以是任意类型 字典

  • 浅谈C#中Action和Func回调的常用方式

    浅谈C#中Action和Func回调的常用方式

    目录 一.简介 二.Action 例1 例2 三.Func 例1 例2 结束 一.简介 Action和Func泛型委托实际上就是一个.NET Framework预定义的委托,3.5引入的特性.基本涵盖了所有常用的委托,所以一般不用用户重新声明.Action系列泛型委托,是没有返回参数的委托,最多可以有16参数,也可以没有参数. Func系列的委托是有返回值的委托,最多可以有16个参数:元组是C# 4.0引入的一个新特性,编写的时候需要基于.NET Framework 4.0或者更高版本.元组使用

随机推荐