• 技术文章 >web前端 >js教程

    Angular4中常用管道实例详解

    小云云小云云2018-05-11 16:43:05原创1648
    通常我们需要使用管道实现对数据的格式化,Angular4中的管道和之前有了一些变化。本文主要介绍Angular4中常用管道,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。

    一、大小写转换管道

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

    相关推荐:

    PHP多线程管道通信的应用

    以上就是Angular4中常用管道实例详解的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:Angular4 详解 实例
    上一篇:vue实现记住密码到cookie的方法 下一篇:Vue.js事件机制源码解析
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【腾讯云】年中优惠,「专享618元」优惠券!• JavaScript类数组和可迭代对象的实现原理详解• 带你深入了解HTTP模块• 聊聊Node.js path模块中的常用工具函数• 手把手带你使用node开发一个命令行压缩工具• JavaScript隐藏机制之垃圾回收知识总结
    1/1

    PHP中文网