Angular学习笔记（十二）之管道

概念

处理原始值到显示值的转换

如：

{{date | date:'yyyy-MM-dd hh-mm-ss'}}

将原始值 Wed Jan 24 2018 21:20:53 GMT+0800 (中国标准时间) 通过date管道 转化成 2018-01-24 09-20-53

Angular的常用内置管道

uppercase 转换成大写英文

//html:
大写转换{{myName|uppercase}}
//ts:
myName:string = 'Baobab';
//输出BAOBAB

lowercase 转换成小写英文

//html:
小写转换{{myName|lowercase }}
//ts:
myName:string = 'Baobab';
//输出baobab

date 日期格式化，带有可选参数



number

自定义管道

执行命令

ng g pipe xxx

，注意管道需要在module中的declaration中声明

demo一：将原始数字放大n倍

//pipe.ts
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
name: 'multiple'
})
//带有元数据的装饰类@pipe,定义了管道的名字

export class MultiplePipe implements PipeTransform {

transform(value: any, args?: any): any {
if(!args){
args = 1;
}
return value*args;
}

}

//transform(value: any, args?: any)，value代表原始值，args可选参数

使用管道multiple

//html
将数字4放大3倍{{numberTest|multiple:3}}
//ts
numberTest:number = 4;

demo二：过滤器

假设现在有一个原始对象列表list,写一个过滤器，过滤出符合输入文字（假设对象的name属性值是变量keyword）的对象

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
name: 'stockfilter'
})
export class StockfilterPipe implements PipeTransform {

transform(list: any[], filed:string , keyword: any): any {
if(!keyword || !filed){
return list;
}
let keyItem = list.filter(item=>{
return item[filed].indexOf(keyword)>= 0
})
return keyItem ;

}

}

transform(list: any[], filed:string , keyword: any)：原始值list，可选参数有两个，一个是元素属性，一个是元素属性值，返回符合条件的对象。

使用管道

<tr *ngFor="let stock of stocks|stockfilter:'name':keyword; let x = index"></tr>