一、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管道操作符的使用的更多相关文章

  1. angular管道相关知识

    原文地址 https://www.jianshu.com/p/22e0f95bcf24 什么是管道 每个应用开始的时候差不多都是一些简单任务:获取数据.转换它们,然后把它们显示给用户. 获取数据可能简 ...

  2. magrittr管道操作符使用解释(一)

    使用管道操作符提高代码简洁性 在编写R语言代码时,有时候需要对一个变量进行一系列的运算,例如对于一个同时包含数值列和字符串列的数据框,如果要计算所有数值列之间的相关系数,一般要分两步,第一步首先筛选数 ...

  3. MongoDB入门---聚合操作&管道操作符&索引的使用

    经过前段时间的学习呢,我们对MongoDB有了一个大概的了解,接下来就要开始使用稍稍深入一点的东西了,首先呢,就是MongoDB中的聚合函数,跟mysql中的count等函数差不多.话不多说哈,我们先 ...

  4. R语言中的管道操作符 %>% %T>% %$% %<>%

    magrittr 包的官网 https://magrittr.tidyverse.org/ magrittr 包的 github 主页 https://github.com/tidyverse/mag ...

  5. (数据科学学习手札144)使用管道操作符高效书写Python代码

    本文示例代码已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 大家好我是费老师,一些比较熟悉pandas的读者 ...

  6. angular 管道

    import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'multi' }) export class MultiPipe ...

  7. rxjs 常用的管道操作符

    操作符文档 api 列表 do -> tap catch -> catchError switch -> switchAll finally -> finalize map s ...

  8. 【mongoDB查询进阶】聚合管道(三)--表达式操作符

    https://segmentfault.com/a/1190000010910985 管道操作符的分类 管道操作符可以分为三类: 阶段操作符(Stage Operators) 表达式操作符(Expr ...

  9. 【mongoDB查询进阶】聚合管道(二) -- 阶段操作符

    https://segmentfault.com/a/1190000010826809 什么是管道操作符(Aggregation Pipeline Operators) mongoDB有4类操作符用于 ...

随机推荐

  1. git ssh使用公钥授权怎么都不通过

    前提: 1.客户端生成了id_rsa.pub和id_rsa 2.服务端在.ssh/authorized_keys也加入了客户端的id_res.pub 3./etc/ssh/sshd_config开启了 ...

  2. 【POJ】1502 MPI Maelstrom

    题目链接:http://poj.org/problem?id=1502 题意:一个处理器给n-1个处理器发送广播,问最短时间.广播时并发,也就是各个路径就大的一方.输入如果是x的话说明两个处理器不能相 ...

  3. ES6 学习 -- Class

    Class的基本语法(1)// 定义类class Point { test() { console.log("hello test"); }}通过 new 定义好的类即可生成一个类 ...

  4. Servlet接口的抽象方法实现

    1.init:初始化方法,在Servlet被创建时执行,只会执行一次2.service:提供服务,每此Servelet被访问时service都会执行3.destroy:销毁方法,在服务器正常关闭时执行 ...

  5. 常见的arp欺骗

    三.常见ARP欺骗形式 1.假冒ARP reply包(单播) XXX,I have IP YYY and my MAC is ZZZ! 2.假冒ARP reply包(广播) Hello everyon ...

  6. robotframework冷门关键字

    1.Reload Page 模拟页面重载 2.Register Keyword To Run On Failure 参数: Keyword 描述: 当Selenium2Library类库关键字执行失败 ...

  7. js 高级 原型与原型链

    * 所有函数都有一个特别的属性: * `prototype` : 显式原型属性* 所有实例对象都有一个特别的属性: * `__proto__` : 隐式原型属性 1.  每个函数都有一个prototy ...

  8. linux shell下除了某个文件外的其他文件全部删除的命令

    Linux反选删除文件 最简单的方法是 # shopt -s extglob      (打开extglob模式) # rm -fr !(file1)  如果是多个要排除的,可以这样: # rm -r ...

  9. SpringBoot集成Redis 一 分布式锁 与 缓存

    1.添加依赖及配置(application.yml) <!-- 引入redis依赖 --> <dependency> <groupId>org.springfram ...

  10. python queue, pipe, manage

    线程中的Queue import time import threading import queue import random def putMessage(): for i in "H ...