angular管道操作符的使用
一、Angular的常用内置管道函数
比如说很多时候我们需要把数字显示成金额、大小写转换、日期小数转换等等。
Angular管道对于象这样小型的转换来说是个很方便的选择。
管道是一个简单的函数,它接受一个输入值,并返回转换结果。
下面说一些常用的管道:
1、大小写转换管道
uppercase将字符串转换为大写
lowercase将字符串转换为小写
<p>{{str | uppercase}}-{{str1 | lowercase}} </p> //str:hello str1:WORLD
页面上显示:HELLO-world
2、日期管道
date:日期管道符可以接受参数,用来规定输出日期的格式。
<p>现在的时间是{{today | date:'yyyy-MM-dd HH:mm:ss'}}</p>
today = new Date();
页面上显示:现在的时间是2019-04-02 16:08:10
3、小数管道
number管道用来将数字处理为我们需要的小数格式
接收的参数格式为{最少整数位数}.{最少小数位数}-{最多小数位数}
其中最少整数位数默认为1
最少小数位数默认为0
最多小数位数默认为3
当小数位数少于规定的{最少小数位数}时,会自动补0
当小数位数多于规定的{最多小数位数}时,会四舍五入
<p>num保留4位小数的值是:{{num | number:'3.2-4'}}</p>
num = 125.156896;
页面上显示:num保留4位小数的值是:125.1569
4、货币管道
currency管道用来将数字转换为货币格式
<p>数量:{{count}}</p>
<p>价格:{{price}}</p>
<p>总价:{{(price * count) | currency:'¥'}}</p>
count = ;
price = 1.5;
页面上显示:
数量:5
价格:1.5
总价:$7.50
5、字符串截取
slice:start[:end]与java中substring类似
<p>{{name | slice : : }}</p>
name = '只对你说';
页面上显示:你说
6、json(数据)格式化
<div>
<p>{{ { name: 'semlinker' } | json }}</p>
</div>
页面上显示:{ "name": "semlinker" }
二、自定义管道(过滤器)方法
1、命令行新建一个管道multiple:
ng g pipe pipe/multiple
新建管道之后默认会在在app.module.ts文件中声明
2、multiple.pipe.ts示例:
import { Pipe, PipeTransform } from '@angular/core'; @Pipe({
name: 'multiple'
})
export class MultiplePipe implements PipeTransform { transform(value: any, args?: any): any {//value:输入值 args:参数
if(!args){//无参的情况下
args = ;
}
return value*args;
} }
3、在视图模板中使用示例:
<p>测试管道用法:{{size | multiple}}</p>
<p>测试管道用法:{{size | multiple:''}}</p> //传参
请注意以下几点:
你使用自定义管道的方式和内置管道完全相同。
你必须在
AppModule
的declarations
数组中包含这个管道。
angular管道操作符的使用的更多相关文章
- angular管道相关知识
原文地址 https://www.jianshu.com/p/22e0f95bcf24 什么是管道 每个应用开始的时候差不多都是一些简单任务:获取数据.转换它们,然后把它们显示给用户. 获取数据可能简 ...
- magrittr管道操作符使用解释(一)
使用管道操作符提高代码简洁性 在编写R语言代码时,有时候需要对一个变量进行一系列的运算,例如对于一个同时包含数值列和字符串列的数据框,如果要计算所有数值列之间的相关系数,一般要分两步,第一步首先筛选数 ...
- MongoDB入门---聚合操作&管道操作符&索引的使用
经过前段时间的学习呢,我们对MongoDB有了一个大概的了解,接下来就要开始使用稍稍深入一点的东西了,首先呢,就是MongoDB中的聚合函数,跟mysql中的count等函数差不多.话不多说哈,我们先 ...
- R语言中的管道操作符 %>% %T>% %$% %<>%
magrittr 包的官网 https://magrittr.tidyverse.org/ magrittr 包的 github 主页 https://github.com/tidyverse/mag ...
- (数据科学学习手札144)使用管道操作符高效书写Python代码
本文示例代码已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 大家好我是费老师,一些比较熟悉pandas的读者 ...
- angular 管道
import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'multi' }) export class MultiPipe ...
- rxjs 常用的管道操作符
操作符文档 api 列表 do -> tap catch -> catchError switch -> switchAll finally -> finalize map s ...
- 【mongoDB查询进阶】聚合管道(三)--表达式操作符
https://segmentfault.com/a/1190000010910985 管道操作符的分类 管道操作符可以分为三类: 阶段操作符(Stage Operators) 表达式操作符(Expr ...
- 【mongoDB查询进阶】聚合管道(二) -- 阶段操作符
https://segmentfault.com/a/1190000010826809 什么是管道操作符(Aggregation Pipeline Operators) mongoDB有4类操作符用于 ...
随机推荐
- 在Word中如何自动生成参考文献引用
来自:在Word中如何自动生成参考文献引用 在写毕业论文时,参考文献动辄就有四五十篇,在文中对照参考文献逐一引用是一件十分痛苦的事情,而且一旦参考文献的顺序发生变化,文中的引用也要逐个修改,那么,我们 ...
- XStream入门应用程序
在进入XStream库的细节之前,让我们来看看应用程序操作.在这个例子中,我们创建Student和Address类.还将创建一个Student对象,然后将其序列化到一个XML字符串.然后反序列化的同一 ...
- 榨取kkksc03
题目描述 洛谷的运营组决定,如果一名oier向他的教练推荐洛谷,并能够成功的使用(成功使用的定义是:该团队有20个或以上的成员,上传10道以上的私有题目,布置过一次作业并成功举办过一次公开比赛),那么 ...
- idea在ssm项目中引入本地的jar
在对应的lib下,右键找到add...,即可
- Photoshop基础照片美化
自从有了“ps”以后,很多事情变成了可能,你可以出现在任何你想在的地方.而最基本的美化照片的功能,我想是很多同学学习PS的初衷.当你掌握了这门技术,很多人会对你刮目相看!今天小编就和大家分享一下ps的 ...
- PKUSC加油加油加油!
一句话,把学过的掌握的甚至还未掌握的,都用上吧! 1.题目不要再再再看错了!在纸上记下关键字. 2.记得有预处理这个东西可以降低复杂度! 3.仔细阅读数据范围,取值范围的0要注意! 4.不要每次像开新 ...
- HashMap 什么时候进行扩容呢
HashMap扩容: 当HashMap中的元素越来越多的时候,碰撞的几率也就越来越高(因为数组的长度是固定的),所以为了提高查询的效率,就要对HashMap的数组进行扩容,数组扩容这个操作也会出现在A ...
- 配置文件一spring-mvc.xml
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...
- Html+css3记录
一.html5新特性 常用语义标签:nav footer header section mark 功能标签 video audio iframe canvas(画布和绘图功能) input新ty ...
- (转)C# 使用UDP组播实现局域网桌面共享
转:http://www.cnblogs.com/mobwiz/p/3715743.html 最近需要在产品中加入桌面共享的功能,暂时不用实现远程控制:参考了园子里的一些文章,加入了一些自己的修改. ...