当前位置:首页 > 日记 > 正文

浅谈Angular4中常用管道

浅谈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.2515b:number = 156.548

页面上将显示

USD8.25

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

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

相关文章

微信小程序 下拉菜单的实现

微信小程序 下拉菜单的实现

下拉菜单,程序,电脑软件,微信小,微信小程序 下拉菜单看下实现效果图:实例://wcss /**DropDownMenu**/ /*总菜单容器*/ .menu { display: block; height: 28px; position: relative; } /*一级菜单*/ .menu dt { font-size: 15px; flo…

excel2013如何快速选中复制筛选出

excel2013如何快速选中复制筛选出

数据,筛选,方法,复制粘贴,快速,  我们在使用excel进行数据筛选的时候,我们对于筛选出来的数据要把它复制到另外一个表格中,对于数据少的时候我们可以通过托拽的形式进行选择,但是对于数据比较多的情况下,我们如何快速进行选择复制呢,今天小编…

详解Vue中添加过渡效果

详解Vue中添加过渡效果

过渡效果,详解,电脑软件,Vue,最近在学习Vue这个框架,发现新的版本中,官网的文档里面说的过渡效果,如果直接粘贴官方的例子中的代码,发现并没有过渡的效果,经过反复测试之后终于知道怎么搞了,把测试的过程总结一下,以便以后回顾。贴上成功的代码:htm…

JavaScript数组去重的多种方法 |

JavaScript数组去重的多种方法 |

方法,数组去重,四种,多种,电脑软件,数组去重,一般需求是给你一个数组,调用去重方法,返回数值副本,副本中没有重复元素。一般来说,两个元素通过 === 比较返回 true 的视为相同元素,需要去重,所以,1 和 "1" 是不同的元素,1 和 new Number(1) 是不同…

bootstrap组件之按钮式下拉菜单小

bootstrap组件之按钮式下拉菜单小

下拉菜单,组件,按钮,电脑软件,bootstrap,1、单按钮下拉菜单基础的下拉菜单最外层是.dropdown的div现在只需要改成.btnd-group的div就可以实现单按钮的下拉菜单<div class="btn-group"> <button type="button" class="btn btn-default…

将angular-ui的分页组件封装成指令

将angular-ui的分页组件封装成指令

分页,组件,方法,封装,详解,准备工作:(1)一如既往的我还是使用了requireJS进行js代码的编译(2)必须引入angualrJS , ui-bootstrap-tpls-1.3.2.js , bootstrap.css....首先抛出几个问题:a):何时回用到分页 (当后端返回的数据过多,一页装不满时,我们必…

如何运用Excel来制作付款单

如何运用Excel来制作付款单

付款,电脑软件,Excel,  付款凭单,是一种授权付款的凭证,如果公司需要制作付款凭单,那么应该怎么利用Excel表格来完成呢?以下是小编为您带来的关于Excel制作付款单,希望对您有所帮助。Excel制作付款单1、选中第一行的前八个单元格,开始-对齐方…

excel2010无法合并单元格的解决方

excel2010无法合并单元格的解决方

合并单元格,解决方法,电脑软件,strong,  Excel中遇到单元格无法合并的问题该如何解决呢?下面是小编带来的关于excel2010无法合并单元格的解决方法,希望阅读过后对你有所启发!excel2010无法合并单元格的解决方法无法合并单元格步骤1:打开exc…

powerpoint无法放映下一页怎么办

powerpoint无法放映下一页怎么办

处理方法,下一页,幻灯片,不能播放,电脑软件,  制作完幻灯片在播放时出现问题,不能播放下一页幻灯片,遇到这种奇怪的问题该怎么办呢?有解决的方法吧?下面小编马上就告诉大家ppt不能播放下一页幻灯片的处理方法,希望看完本教程的朋友都能学会…

QQ空间说说新增定时发表功能

QQ空间说说新增定时发表功能

空间,功能,电脑软件,QQ,ldquo,  很多人都喜欢在QQ空间里面发说说,特别是别人生日的时候,但难免可能会忘记发,这时候就有一个定时发表功能,如何定时发表空间说说?下面是小编整理的一些关于QQ空间说说新增定时发表功能的相关资料,供您参考。QQ空…

ES6字符串模板,剩余参数,默认参数功

ES6字符串模板,剩余参数,默认参数功

默认参数,模板,字符串,参数,示例,本文实例讲述了ES6字符串模板,剩余参数,默认参数功能与用法。分享给大家供大家参考,具体如下:这里介绍一下字符串模板以及剩余参数,默认参数的概念以及使用。先来说说字符串模板。字符串模板ES6中允许使用反引号…

javascript深拷贝的原理与实现方法

javascript深拷贝的原理与实现方法

方法,深拷贝,原理,电脑软件,javascript,本文实例讲述了javascript深拷贝的原理与实现方法。分享给大家供大家参考,具体如下:要讲JavaScript的拷贝,就得先讲讲javascript中的值传递和引用传递。javascript中没有一个具体的语法来规定哪些参数是…