一、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. 在Word中如何自动生成参考文献引用

    来自:在Word中如何自动生成参考文献引用 在写毕业论文时,参考文献动辄就有四五十篇,在文中对照参考文献逐一引用是一件十分痛苦的事情,而且一旦参考文献的顺序发生变化,文中的引用也要逐个修改,那么,我们 ...

  2. XStream入门应用程序

    在进入XStream库的细节之前,让我们来看看应用程序操作.在这个例子中,我们创建Student和Address类.还将创建一个Student对象,然后将其序列化到一个XML字符串.然后反序列化的同一 ...

  3. 榨取kkksc03

    题目描述 洛谷的运营组决定,如果一名oier向他的教练推荐洛谷,并能够成功的使用(成功使用的定义是:该团队有20个或以上的成员,上传10道以上的私有题目,布置过一次作业并成功举办过一次公开比赛),那么 ...

  4. idea在ssm项目中引入本地的jar

    在对应的lib下,右键找到add...,即可

  5. Photoshop基础照片美化

    自从有了“ps”以后,很多事情变成了可能,你可以出现在任何你想在的地方.而最基本的美化照片的功能,我想是很多同学学习PS的初衷.当你掌握了这门技术,很多人会对你刮目相看!今天小编就和大家分享一下ps的 ...

  6. PKUSC加油加油加油!

    一句话,把学过的掌握的甚至还未掌握的,都用上吧! 1.题目不要再再再看错了!在纸上记下关键字. 2.记得有预处理这个东西可以降低复杂度! 3.仔细阅读数据范围,取值范围的0要注意! 4.不要每次像开新 ...

  7. HashMap 什么时候进行扩容呢

    HashMap扩容: 当HashMap中的元素越来越多的时候,碰撞的几率也就越来越高(因为数组的长度是固定的),所以为了提高查询的效率,就要对HashMap的数组进行扩容,数组扩容这个操作也会出现在A ...

  8. 配置文件一spring-mvc.xml

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...

  9. Html+css3记录

    一.html5新特性  常用语义标签:nav footer header section mark  功能标签 video audio iframe canvas(画布和绘图功能)  input新ty ...

  10. (转)C# 使用UDP组播实现局域网桌面共享

    转:http://www.cnblogs.com/mobwiz/p/3715743.html 最近需要在产品中加入桌面共享的功能,暂时不用实现远程控制:参考了园子里的一些文章,加入了一些自己的修改. ...