Angular4中常用管道实例详解

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

一、大小写转换管道

uppercase将字符串转换为大写

lowercase将字符串转换为小写

将字符串转换为大写{{str | uppercase}}

登录后复制

str:string = 'hello'

登录后复制

页面上会显示

将字符串转换为大写HELLO

二、日期管道

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

现在的时间是{{today | date:'yyyy-MM-dd HH:mm:ss'}}

登录后复制

today:Date = new Date();

登录后复制

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

三、小数管道

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

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

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

最少小数位数默认为0

最多小数位数默认为3

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

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

圆周率是{{pi | number:'2.2-4'}}

登录后复制

pi:number = 3.14159;

登录后复制

页面上会显示

圆周率是03.1416

四、货币管道

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

{{a | currency:'USD':false}}

{{b | currency:'USD':true:'4.2-2'}}

登录后复制

a:number = 8.2515b:number = 156.548

登录后复制

页面上将显示

USD8.25

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

相关推荐:

PHP多线程管道通信的应用

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2788204.html

(0)
上一篇 2025年3月8日 18:23:04
下一篇 2025年3月7日 18:46:22

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 微信小程序多文件下载的简单封装实例讲解

    本文主要介绍微信小程序之多文件下载的简单封装示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。 需求 需要生成一个宣传的图片分享到朋友圈,这个宣传图片包含二维码,包含不同的背景图片和不同的文…

    编程技术 2025年3月8日
    200
  • Vue shopCart 组件开发实例详解

    本文主要和大家介绍vue shopcart 组件开发详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。 一、shopCart组件 (1) goods 父组件和 子组件 shopCart 传参…

    编程技术 2025年3月8日
    200
  • ES6 Promise 扩展always方法实例详解

    本文主要介绍es6 promise 扩展always方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。 ES6添加了Promise对象,成功时在then中处理,失败则在catch中处理,但有…

    编程技术 2025年3月8日
    200
  • js数组和对象的深浅拷贝详解

    本文主要为大家详细介绍js实现数组和对象的深浅拷贝,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望梦帮助到大家。 前提:原始数据类型和对象类型赋值时的差异 JavaScript的数据类型分为原始数据类型和对象类型。二者在内存中存放的…

    编程技术 2025年3月8日
    200
  • Permissions权限申请实例

    对于移动开发,我们知道android 6.0之后对于权限管理做了很大的升级,其类似于ios的管理管理方式需要用手动授权是否允许使用当前权限, 在rn开发中同样存在这样一个模块。 本文介绍了React Native模块之Permissions…

    编程技术 2025年3月8日
    200
  • Three.js绘制字体模型示例代码

    本文主要给大家介绍了关于three.js如何绘制字体模型的相关资料,通过文中介绍的方法实现的效果非常的赞,需要的朋友可以参考借鉴,下面来一起看看吧。 首先你需要实例化 THREE.FontLoader() 来进行json格式的文字格式加载,…

    编程技术 2025年3月8日
    200
  • vue封装第三方插件并发布到npm实例

    本文主要和大家介绍了vue封装第三方插件并发布到npm的方法,主要说明如何把第三方的插件封装成vue插件,简化配置,一键安装,主要提供思路,封装方法大同小异·,文章略长要有耐心。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小…

    2025年3月8日 编程技术
    200
  • 实例详解react.js父子组件数据绑定实时通讯

    本文主要和大家介绍react.js 父子组件数据绑定实时通讯的示例代码,react.js我自己还在摸索学习中,碰到父子组件数据绑定实时通讯的问题,研究了一下,分享给大家,也给自己留个笔记: import React,{Component} …

    编程技术 2025年3月8日
    200
  • Map以及常用api实例详解

    ecmascript 6中的map类型是一种存储着许多键值对的有序列表。键值对支持所有的数据类型. 键 0 和 ‘0’会被当做两个不同的键,不会发生强制类型转换.本文主要为大家带来一篇es6系列教程_ map详解以及常用api介…

    2025年3月8日
    200
  • JS中的BOM应用详解

    本文我们住要和大家分享js中的bom应用详解,我们曾经讲过js由三部分组成,其中一个部分就是bom,用于对浏览器进行操作。这节课我们主要就来介绍bom。 BOM基础 我们先来看一个BOM的最基础功能:打开、关闭窗口: 无标题文档 登录后复制…

    2025年3月8日
    200

发表回复

登录后才能评论