angular4 常用pipe管道
angular中的pipe是用来对输入的数据进行处理,如大小写转换、数值和日期格式化等。
常用的pipe有
1. 大小写转换
<p>{{str | uppercase}}</p>//转换成大写
<p>{{str | lowercase}}</p>//转换成小写
2. 日期格式转换
<p>{{today | date:'yyyy-MM-dd HH:mm:ss' }}</p>
3. 小数位数
//接收的参数格式为{最少整数位数}.{最少小数位数}-{最多小数位数}
//保留2~4位小数
<p>{{p | number:'1.2-4'}}</p>
4. JavaScript 对象序列化
<p>{{ { name: 'semlinker' } | json }}</p> <!-- Output: { "name": "semlinker" } -->
5. slice
<p>{{ 'semlinker' | slice:0:3 }}</p> <!-- Output: sem -->
6. 管道链
<p>{{ 'semlinker' | slice:0:3 | uppercase }}</p> <!-- Output: SEM -->
7. 自定义管道
自定义管道的步骤:
使用 @Pipe 装饰器定义 Pipe 的 metadata 信息,如 Pipe 的名称 - 即 name 属性
实现 PipeTransform 接口中定义的 transform 方法
1.1 WelcomePipe 定义
import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'welcome' })
export class WelcomePipe implements PipeTransform {
transform(value: string): string {
if(!value) return value;
if(typeof value !== 'string') {
throw new Error('Invalid pipe argument for WelcomePipe');
}
return "Welcome to " + value;
}
}
1.2 WelcomePipe 使用
<div>
<p ngNonBindable>{{ 'semlinker' | welcome }}</p>
<p>{{ 'semlinker' | welcome }}</p> <!-- Output: Welcome to semlinker -->
</div>
2.1 RepeatPipe 定义
import {Pipe, PipeTransform} from '@angular/core'; @Pipe({name: 'repeat'})
export class RepeatPipe implements PipeTransform {
transform(value: any, times: number) {
return value.repeat(times);
}
}
2.2 RepeatPipe 使用
<div>
<p ngNonBindable>{{ 'lo' | repeat:3 }}</p>
<p>{{ 'lo' | repeat:3 }}</p> <!-- Output: lololo -->
</div>
angular4 常用pipe管道的更多相关文章
- Python第十一天 异常处理 glob模块和shlex模块 打开外部程序和subprocess模块 subprocess类 Pipe管道 operator模块 sorted函数 os模块 hashlib模块 platform模块 csv模块
Python第十一天 异常处理 glob模块和shlex模块 打开外部程序和subprocess模块 subprocess类 Pipe管道 operator模块 sorted函 ...
- pipe()管道最基本的IPC机制
<h4>进程间通信 fork pipe pie_t 等用法(管道机制 通信)</h4>每个进程各自有不同的用户地址空间,任何一个进程的全局变量在另一个进程中都看不到,所以进程之 ...
- python线程,pipe管道通信原理
Pipe管道: * 管道实例化后会产生两个通道,分别交给两个进程* 通过send和recv来交互数据,这是一个双向的管道,child和parent可以互相收发 from multiprocessing ...
- python学习笔记——multiprocessing 多进程组件 Pipe管道
进程间通信(IPC InterProcess Communication)是值在不同进程间传播或交换信息. IPC通过有管道(无名管道 和 有名 / 命名管道).消息队列.共享存储 / 内容.信号量. ...
- Swoole 源码分析——基础模块之 Pipe 管道
前言 管道是进程间通信 IPC 的最基础的方式,管道有两种类型:命名管道和匿名管道,匿名管道专门用于具有血缘关系的进程之间,完成数据传递,命名管道可以用于任何两个进程之间.swoole 中的管道都是匿 ...
- 驱动通信:通过PIPE管道与内核层通信
在本人前一篇博文<驱动开发:通过ReadFile与内核层通信>详细介绍了如何使用应用层ReadFile系列函数实现内核通信,本篇将继续延申这个知识点,介绍利用PIPE命名管道实现应用层与内 ...
- pipe管道
回顾: 进程间通信方式: 信号,管道 消息队列,共享内存,信号量 sokcet 信号: 本质就是软中断 signal(信号,函数指针); void func(int); kill(pid,signo) ...
- Linux中的pipe(管道)与named pipe(FIFO 命名管道)
catalogue . pipe匿名管道 . named pipe(FIFO)有名管道 1. pipe匿名管道 管道是Linux中很重要的一种通信方式,是把一个程序的输出直接连接到另一个程序的输入,常 ...
- rxjs 常用的管道操作符
操作符文档 api 列表 do -> tap catch -> catchError switch -> switchAll finally -> finalize map s ...
随机推荐
- centos5.5 快速安装mysql
安装MySQL. [root@sample ~]# yum -y install mysql-server ← 安装MySQL[root@sample ~]# yum -y install php-m ...
- 通达OA 几次通过OA进行的足球抢票活动确实对OA系统提出了非常大挑战
今年集团赞助了中超的足球比赛,有比赛的时候会提前发一些球票.怎么发.发给谁这就是一个问题.后来确定通过OA来抢票. 通过在OA上发表帖子.通过信息提醒.大家看到信息提示后在帖子后面回复,依据回复先后确 ...
- rabbitMQ之安装和配置(一)
前言 erlang是一门面向并发的编程语言,流行的消息队列rabbitMQ是基于erlang环境运行的: 下载安装erlang语言环境 源码安装 # 从官网下载,在任何目录下,使用root权限 wge ...
- Linux Shell编程之常用技巧
前言 本文集中介绍了bash编程中部分高级编程方法和技巧.通过学习本文内容,可以帮你解决以下问题: 1.bash可以网络编程么? 2..(){ .|.& };. 据说执行这些符号可以死机,那么 ...
- word文档老是出现这个提示-----“发现二义性的名称:TmpDDE”错误
你好 我解决这个问题了,我把appdata目录下的normal.dotm删除了就没问题了 将系统中路径C:\Users\Administrator\AppData\Roaming\Microsoft\ ...
- 16位结构的CPU,8086给出物理地址的方法
.16位结构的CPU 概括地讲,16位结构(16位机,字长为16位等常见说法,与16位结构的含义相同)描述了一个CPU具有下面几方面结构特性: 1.运算器一次最多可以处理16位的数据结构 2.寄存器的 ...
- Parallelism , Partitioner
转:spark通过合理设置spark.default.parallelism参数提高执行效率 spark中有partition的概念(和slice是同一个概念,在spark1.2中官网已经做出了说明) ...
- Android——Android studio项目中如何查看R.java文件(转)
Android Studio 是Google推出的一个Android开发环境,它集成了Android 开发工具用于开发和调试,类似 Eclipse ADT.Google公司停止对eclipse的后续支 ...
- 我在GitHub Pages托管静态博客啦~
https://jinhengyu.github.io/
- 如何解决PHP里大量数据循环时内存耗尽的问题
最近在开发一个PHP程序时遇到了下面的错误: PHP Fatal error: Allowed memory size of 268 435 456 bytes exhausted 错误信息显示允许的 ...