位置: 编程技术 - 正文

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)

  • 生产成本和销售费用是对应账户吗
  • 多余的进项税该怎么处理
  • 工程结算属于什么行业
  • 办公室转租怎么给对方开发票
  • 合同成本在哪个科目列支
  • 劳保如何入账
  • 司法拍卖定义
  • 商业企业能否计税
  • 票据到期兑付会怎么样
  • 加油站企业规模大小怎么划分
  • 科研项目间接费用会计分录
  • 每月增值税怎么做账
  • 收到技术咨询费摘要
  • 预收账款在什么科目核算
  • 超过五千
  • 库存红字冲销
  • 境外工资薪金
  • 个体工商户给员工交社保流程
  • 什么叫项目所在地
  • 技术服务费属于什么税收分类编码
  • 蓝字发票是什么
  • 贷款减值损失的计提规则
  • 债券折价摊销属于借款费用吗
  • 公司将自有车辆对外出租
  • 在建工程二级科目待摊支出
  • 员工出差买的保险怎么入账
  • 股权代持分红免税吗
  • 股东撤资退出
  • win10 搜狗
  • macbook自动弹出页面
  • php serialize
  • 公司认缴出资怎么交税
  • 租赁固定资产成本怎么算
  • sbdrvdet.exe - sbdrvdet是什么进程 有什么用
  • 公司收到补偿款是利好还是利空
  • vue3性能对比
  • 总分机构分摊比例如何确定
  • acc字幕文件怎么转换srt字幕
  • vmware vmtools
  • 现金溢余和短缺的会计分录
  • discuz 移动端
  • 事业单位无形资产折旧是当月还是下月
  • 发票6个点怎么算收税点
  • python中循环怎么写
  • 预收账款多好还是少好
  • 租赁公司一般都有什么税
  • 个体户可以开多少免税发票
  • mongodb修改数据库名称
  • 预期信用损失率的确认依据和过程
  • 银行承兑汇票和银行汇票的区别
  • 开出增值税发票确认收入分录?
  • 员工餐费标准怎么算
  • 直接人工标准工时计算公式
  • 本月应付电费计入哪个账户
  • 损益明细表计提企业所得税
  • 主营业务收入的英文
  • 存出投资款应计入什么科目
  • 银行对账单怎么修改
  • win9怎么升级win10
  • win10预览版选哪个
  • ubuntu16.04创建用户
  • U盘安装centos 7出现unknown chipset
  • 编程乱码
  • keyword是啥
  • win7系统打印机共享给win10
  • win7c盘突然满了怎么回事
  • jsclass选择器
  • css里注释
  • jquery 设置checked
  • python 异步操作
  • c#委托的理解
  • typescript concat
  • unity ugui源码
  • 简述jquery的常用方法
  • android获取屏幕大小
  • 关联企业业务往来税收调整
  • 生产变压器设备
  • 税务官网怎么登录账号
  • 太原公安分局有几个
  • 代扣app有哪些
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设