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类操作符用于 ...
随机推荐
- git ssh使用公钥授权怎么都不通过
前提: 1.客户端生成了id_rsa.pub和id_rsa 2.服务端在.ssh/authorized_keys也加入了客户端的id_res.pub 3./etc/ssh/sshd_config开启了 ...
- 【POJ】1502 MPI Maelstrom
题目链接:http://poj.org/problem?id=1502 题意:一个处理器给n-1个处理器发送广播,问最短时间.广播时并发,也就是各个路径就大的一方.输入如果是x的话说明两个处理器不能相 ...
- ES6 学习 -- Class
Class的基本语法(1)// 定义类class Point { test() { console.log("hello test"); }}通过 new 定义好的类即可生成一个类 ...
- Servlet接口的抽象方法实现
1.init:初始化方法,在Servlet被创建时执行,只会执行一次2.service:提供服务,每此Servelet被访问时service都会执行3.destroy:销毁方法,在服务器正常关闭时执行 ...
- 常见的arp欺骗
三.常见ARP欺骗形式 1.假冒ARP reply包(单播) XXX,I have IP YYY and my MAC is ZZZ! 2.假冒ARP reply包(广播) Hello everyon ...
- robotframework冷门关键字
1.Reload Page 模拟页面重载 2.Register Keyword To Run On Failure 参数: Keyword 描述: 当Selenium2Library类库关键字执行失败 ...
- js 高级 原型与原型链
* 所有函数都有一个特别的属性: * `prototype` : 显式原型属性* 所有实例对象都有一个特别的属性: * `__proto__` : 隐式原型属性 1. 每个函数都有一个prototy ...
- linux shell下除了某个文件外的其他文件全部删除的命令
Linux反选删除文件 最简单的方法是 # shopt -s extglob (打开extglob模式) # rm -fr !(file1) 如果是多个要排除的,可以这样: # rm -r ...
- SpringBoot集成Redis 一 分布式锁 与 缓存
1.添加依赖及配置(application.yml) <!-- 引入redis依赖 --> <dependency> <groupId>org.springfram ...
- python queue, pipe, manage
线程中的Queue import time import threading import queue import random def putMessage(): for i in "H ...