位置: 编程技术 - 正文

Angular2管道Pipe及自定义管道格式数据用法实例分析(angular api)

编辑:rootadmin

推荐整理分享Angular2管道Pipe及自定义管道格式数据用法实例分析(angular api),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:angular provider,angular的排序管道,angular async管道,angular的排序管道,angular 管道,angular pipe,angular 管道,angular pipe,内容如对您有帮助,希望把文章链接给更多的朋友!

本文实例讲述了Angular2管道Pipe及自定义管道格式数据用法。分享给大家供大家参考,具体如下:

管道(Pipe)可以根据开发者的意愿将数据格式化,还可以多个管道串联。

纯管道(Pure Pipe)与非纯管道(Impure Pipe)

管道分纯管道(Pure Pipe)和非纯管道(Impure Pipe)。默认情况下,管道都是纯的,在自定义管道声明时把pure标志置为false,就是非纯管道。如:

纯管道和非纯管道的区别:

① 纯管道:

Angular只有检查到输入值发生纯变更时,才会执行纯管道。纯变更指的是,原始类型值(String,Number,Boolean,Symbol)的改变,或者对象引用的改变(对象值改变不是纯变更,不会执行).

② 非纯管道

Angular会在每个组件的变更检测周期执行非纯管道。所以,如果使用非纯管道,我们就得注意性能问题了。

管道使用语法

{{expression | pipe : arg}}

如果是链式串联:

{{expression | pipe1 : arg | pipe2 | pipe3 }}

常用内置管道

管道 类型 功能 DatePipe 纯管道 日期格式化 JsonPipe 非纯管道 使用JSON.stringify()将对象转成json字符串 UpperCasePipe 纯管道 将文本中的字母全部转在大写 LowerCasePipe 纯管道 将文本中的字母全部转成小写 DecimalPipe 纯管道 数值格式化 CurrencyPipe 纯管道 货币格式化 PercentPipe 纯管道 百分比格式化 SlicePipe 非纯管道 数组或字符串取切割

DatePipe

语法:{{expression | date:format}}

expression支持日期对象、日期字符串、毫秒级时间戳。format是指定的格式,常用标志符:

y 年 y使用4位数字表示年份(),yy使用两位数字表示()M 月 M 1位或两位数字(2或、、),MM 两位数字表示,前面补0()d 日 d 一位或两位数字(9) dd两位数字,前面补0()E 星期 EEE 三位字母缩写的星期 EEEE 星期全称j 小时制时间 j (9 AM) jj ( AM)h 小时制小时 h(9) hh ()H 小时制小时 H(9) HH ()m 分 m (5) mm ()s 秒 s (1) ss ()z 时区 z China Standard Time

DecimalPipe

语法:{{expression | number[: digiInfo] }}

digiInfo格式:

{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}

Angular2管道Pipe及自定义管道格式数据用法实例分析(angular api)

即:整数位保留最小位数.小数位保留最小位数-小数位最大保留位置

默认值: 1.0-3

CurrencyPipe

语法:{{expression | currency[: currencyCode[: symbolDisplay[: digiInfo]]] }}

digiInfo格式与DecimalPipe相同,不再解释。

currencyCod是指货币代码,其值为ISO 标准,人民币CNY,美元USD,欧元 EUR.symbolDisplay 是一个布尔值,true时显示货币符号($¥) false显示货币码

PercentPipe

语法:{{expression | percent[: digiInfo] }}

digiInfo格式与DecimalPipe相同,不再解释。

SlicePipe

语法:{{expression | slice: start [: end] }}

expression 可以是一个字符串或数组。字符串时,该管道调用String.prototype.slice()方法截取子串。如果是数组,调用Array.prototype.slice()方法取数组子元素。

自定义管道

除了使用内置的管道,还可以通过自定义管道实现更复杂的功能。

创建管道:

ng g pipe sexReform

angular-cli会帮我们创建SexReformPipe管道,这个管道的功能是根据male、female返回中文的男、女。

代码:

重点在于实现PipeTransform接口的transform方法,定义为非纯管道仅用于演示,非纯管道对性能影响较大,尽量避免。

演示代码

组件:

模板:

更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。

详解angularjs实现echart图表效果最简洁教程 本文介绍了详解angularjs实现echart图表效果最简洁教程,分享给大家,具体如下:ehcart是百度做的数据图表,基于原生js。接口和配置都写的很好很易读,

3种vue组件的书写形式 本文实例为大家分享了vue组件的书写形式,供大家参考,具体内容如下第一种使用script标签!DOCTYPEhtmlhtmlbodydivid="app"my-component/my-component/div--注意:使用scr

vue的状态管理模式vuex vuex是一个专门为vue.js设计的状态管理模式,并且也可以使用devtools进行调试。备注:本文的示例等代码将会采用es6的语法。链接vuex官方中文网站使用vue

标签: angular api

本文链接地址:https://www.jiuchutong.com/biancheng/378937.html 转载请保留说明!

上一篇:Angular4的输入属性与输出属性实例详解(angularjs input)

下一篇:详解angularjs实现echart图表效果最简洁教程(angularjs4)

  • 补缴个税差额有时间规定吗
  • 未开票收入退回可以冲税吗
  • 盖了骑缝章的合同怎么写
  • 进项认证以后如何开具红字信息表
  • 税控系统的清单
  • 企业转让固定资产要交什么税
  • 一般纳税人月底增值税如何结转
  • 发票进项税额抵扣的最晚时间
  • 实际收到股票股利的分录
  • 进项抵欠税相关政策
  • 专项资金可以存定期吗
  • 借款合同的印花税税率
  • 发票抬头写错了还能报销吗
  • 建筑业简易征收差额征税的计算案例
  • 信用等级D可以贷款吗
  • 专票认证不通过退回
  • 建筑业小规模纳税人认定标准
  • 单位的审计
  • 2019年印花税税率表
  • 小规模纳税人增值税政策
  • 一般纳税人普通发票要交增值税吗
  • 个体户免税额度超出了
  • 债券借贷业务属于表外业务吗
  • 增值税清卡失败f50006
  • 股东收回投资款的现金流量
  • 对子公司投资款要交税吗
  • 美金收入 如何交税
  • 社保缴纳方式怎么填
  • 修改组策略后需要重启吗
  • 什么是跨区域涉税业务
  • 管理软件对相机的要求
  • 电脑搜狗输入法不见了怎么调出来
  • mac中的finder简介命令
  • php中的类
  • 仙鹤草的功效与作用与主治功能
  • 酒店里用了收费的东西怎么算
  • php imagettftext()函数
  • 应收票据其他应收款都需要提取坏账准备么
  • 企业所得税的基本税率是多少?
  • 企业研发费用加计扣除最新政策
  • 罚款属于应付账款吗
  • 纳税申报表填写说明
  • 开源代码网站github
  • yolov5增加检测层
  • node js教程
  • css基础入门
  • 以股权换股权税务问题
  • 对公账户每笔钱都得做账吗
  • 公允价值变动损益
  • 关于帝国战争的游戏
  • mysql集群三种方式
  • 一次性就业补助金有时间限制吗
  • 嵌入式软件行业在加计扣除的时候可以看作是制造业吗
  • 无形资产入账价值错误怎么调
  • 单位银行提取大额现金最多能取多少
  • PostgreSQL教程(十六):系统视图详解
  • mysql在表中添加一个新的属性
  • 小规模差额征税是什么意思
  • 专用发票什么意思
  • 微众银行的企业贷款好批吗
  • 进出口总额用什么字母表示
  • 养老保险 退钱
  • 企业视同销售的情况都有哪些?
  • 单位存款的种类有哪些
  • 差旅费报销单怎么填写
  • windows找不到文件请确定文件名是否正确
  • window10怎么设置蓝牙
  • macos睡眠
  • 新手菜鸟什么意思
  • linux 根目录
  • Win8系统网络SSID怎么设置?Win8设置网络SSID的方法
  • cad90度角
  • redhat linux6.5安装教程
  • JavaScript中数组包含的属性和方法有哪
  • python编程判断一千以内含88的数的方法
  • JavaScript中OnLoad几种使用方法
  • [置顶]电影名字《收件人不详》
  • 铁路货运的费用有哪些
  • 怎么删除天眼查的判决文书
  • 河北耕地占用税最新规定
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设