一、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. 基于三角形与位置指纹识别算法的WiFi定位比较

    文章来着:https://wenku.baidu.com/view/55d1f4146edb6f1aff001fec.html

  2. haproxy Mycat集

    8-1   镜像haproxy docker run -it --privileged --name haproxy  docker.io/centos:latest 8-2wget http://w ...

  3. 22个Photoshop网页设计教程网站推荐

    这些网站都会经常更新一些优秀且高质量的Web界面设计教程.如果你热爱网页设计并且经常搜集各种界面设计教程,那么你一定要把下面这些网站收藏起来. 您还可以参考以下网页设计相关教程及资源:<Web ...

  4. ie8以下不兼容h5新标签的解决方法

    HTML5新添了一些语义化标签,他们能让代码语义化更直观易懂,有利于SEO优化.但是此HTML5新标签在IE6/IE7/IE8上并不能识别,需要进行JavaScript处理. 解决思路就是用js创建h ...

  5. JS函数 函数的作用,可以写一次代码,然后反复地重用这个代码。

    什么是函数 函数的作用,可以写一次代码,然后反复地重用这个代码. 如:我们要完成多组数和的功能. var sum; sum = 3+2; alert(sum); sum=7+8 ; alert(sum ...

  6. Java 局部变量

    Java 局部变量 局部变量声明在方法.构造方法或者语句块中: 局部变量在方法.构造方法.或者语句块被执行的时候创建,当它们执行完成后,变量将会被销毁: 访问修饰符不能用于局部变量: 局部变量只在声明 ...

  7. CSS3——过渡

    过渡(transition)是CSS3中具有颠覆性的特征之一,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果. 帧动画:通过一帧 ...

  8. 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 ...

  9. js 实现 map 工具类

    /* * MAP对象,实现MAP功能 * * 接口: * size() 获取MAP元素个数 * isEmpty() 判断MAP是否为空 * clear() 删除MAP所有元素 * put(key, v ...

  10. (1)python tkinter-窗体

    1.导入自带的包名 import tkinter 2.创建一个窗体对象 form=Tkinter.Tk() 3.显示窗体(这句应该是所有的设置部署完最后执行的一句代码) form.mainloop() ...