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类操作符用于 ...
随机推荐
- 基于三角形与位置指纹识别算法的WiFi定位比较
文章来着:https://wenku.baidu.com/view/55d1f4146edb6f1aff001fec.html
- haproxy Mycat集
8-1 镜像haproxy docker run -it --privileged --name haproxy docker.io/centos:latest 8-2wget http://w ...
- 22个Photoshop网页设计教程网站推荐
这些网站都会经常更新一些优秀且高质量的Web界面设计教程.如果你热爱网页设计并且经常搜集各种界面设计教程,那么你一定要把下面这些网站收藏起来. 您还可以参考以下网页设计相关教程及资源:<Web ...
- ie8以下不兼容h5新标签的解决方法
HTML5新添了一些语义化标签,他们能让代码语义化更直观易懂,有利于SEO优化.但是此HTML5新标签在IE6/IE7/IE8上并不能识别,需要进行JavaScript处理. 解决思路就是用js创建h ...
- JS函数 函数的作用,可以写一次代码,然后反复地重用这个代码。
什么是函数 函数的作用,可以写一次代码,然后反复地重用这个代码. 如:我们要完成多组数和的功能. var sum; sum = 3+2; alert(sum); sum=7+8 ; alert(sum ...
- Java 局部变量
Java 局部变量 局部变量声明在方法.构造方法或者语句块中: 局部变量在方法.构造方法.或者语句块被执行的时候创建,当它们执行完成后,变量将会被销毁: 访问修饰符不能用于局部变量: 局部变量只在声明 ...
- CSS3——过渡
过渡(transition)是CSS3中具有颠覆性的特征之一,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果. 帧动画:通过一帧 ...
- python相关软件安装流程图解——Windows下安装Redis以及可视化工具——Redis-x64-3.2.100——redis-desktop-manager-0.9.3.817
https://www.2cto.com/database/201708/666191.html https://github.com/MicrosoftArchive/redis/releases ...
- js 实现 map 工具类
/* * MAP对象,实现MAP功能 * * 接口: * size() 获取MAP元素个数 * isEmpty() 判断MAP是否为空 * clear() 删除MAP所有元素 * put(key, v ...
- (1)python tkinter-窗体
1.导入自带的包名 import tkinter 2.创建一个窗体对象 form=Tkinter.Tk() 3.显示窗体(这句应该是所有的设置部署完最后执行的一句代码) form.mainloop() ...