在 Angular 中,过滤器也叫管道。它最重要的作用就是用来格式化数据的输出。
举个简单例子:
currentTime=new Date();
<h1>{{currentTime | date:'yyyy-MM-dd HH:mm:ss'}}</h1>
Angular 一共内置了一些过滤器:https://angular.io/api?type=pipe。
货币转换 currency
{{123 | currency }} //$123
{{123 | currency:'¥' }} //¥123
格式化时间 date
{{new Date() | date:'yyyyMMdd'}} //2016/11/02
yyyy/yy : 2016 / 16(年)
MM: 11 (月)
dd:02 (日)
h/hh : 8 / 08 (时)
m/mm : 5 / 05 (分)
s /ss : 9 /09(秒)
EEEE/EEE :(星期)
filter
filter可以将一个数组,对象,函数,字符串中选择满足条件的子集,并返回一个新数组
{{arr | filter:'s'}} //选出arr数组中带 ‘s’的项
json
将JavaScript对象转为json对象
{{{name:'jack'} | json}} // {"name":"jack"}
截取字符串和数组 limitTo
str : "abcdefg"
{{ str |limitTo:1 }}
将字符串数字转为数字 number
{{'123.134545'| number:4}} //保留4位小数 四舍五入 默认保留3位小数
uppercase lowercase
将英文字母转为大写或小写。
{{ 'Hello' | uppercase }} //HELLO
{{'Hello' | lowercase}} //hello
orderBy 数组排序
默认: 正序(1-9 a-z)
传参数: 按指定参数的顺序排列
{{arr | orderBy:age}}
在复杂业务场景中,内置的过滤器肯定是不够用的,所有 Angular 也支持自定义过滤器。
https://angular.io/guide/pipes
自定义过滤器
ng generate pipe msgformat
//msgformat.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'msgformat'
})
export class MsgformatPipe implements PipeTransform {
transform(value: string, ...args: unknown[]): unknown {
return value.split('').reverse().join('');;
}
}
//使用
<div>{{"123"|msgformat}}</div>