angular中常见的管道及用法

原文链接：https://www.longkui.site/program/frontend/angular-pipe/5147/

上一篇文章中，简单介绍了angular中自定义管道的使用：

angular中如何自定义一个管道

这篇文章介绍一下，angular中自带的一些好用管道。

1.日期管道
{{ dateTime | date:‘yyyy-MM-dd HH:mm:ss’}} // 2022-12-12 11:21:21

{{ dateTime | date:‘medium’ }} // 2022年12月12日 上午11:21:21

{{ dateTime | date:‘short’ }} // 2022/12/12 上午10:21

{{ dateTime | date:‘fullDate’ }} // 2022年12月12日星期六

{{ dateTime | date:‘longDate’ }} // 2022年12月12日

{{ dateTime | date:‘mediumDate’ }} // 2022年12月12日

{{ dateTime | date:‘shortDate’ }} // 2022/12/12

{{ dateTime | date:‘mediumTime’ }} // 上午10:21:21

{{ dateTime | date:‘shortTime’ }} // 上午10:21
2.保留小数
{{data.money|number:‘1.2-2’}}
意味保留两位小数，

它的格式是下面这样：

digitsInfo={minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}。

minIntegerDigits：小数点前的最小整数位数。默认是1。
minFractionDigits：小数点后的最小位数。默认是0。
maxFractionDigits：小数点后的最大位数。默认是3。

3.大小写转换
全部转换成大写

{{str1 | uppercase}}

全部转换成小写

{{str2 | lowercase}}

4.JSON序列化 这个一般用于调试的时候，在页面中显示json数据，比如我有下面这样的数据json数据：

object = {
name: “张三”,
age: “2”,
“id”:2
}
然后在页面上使用下面的代码

{{ object | json}}

结果是

{ “name”: “张三”, “age”: “2”, “id”: 2 }
然后，这个管道也接受数组形式，比如下面这样：

object = [{
name: “张三”,
age: “2”,
“id”: 2
},
{
name: “李四”,
age: “2”,
“id”: 3
},
]
5.字符串截取
str1 = “hello world”

{{str1 | slice:0:3}}

结果是： hel

6.货币管道
主要用来显示货币，比如下面这样

str2=‘12345678’
str3=87654321

{{ str2 | currency:'EUR'}}

{{str3 | currency:'CNY'}}

结果为

€12,345,678.00
CN¥87,654,321.00
特别注意的是，人民币并不是RMB，而是CNY

其他的国家或者地区的货币简写可以参考下面的文章：

常见的货币及其英文缩写简写

7.百分比管道
str4=“1234”

{{str4 | percent }}

结果为：

123,400%
这个管道会将数据乘100。

8.标题管道
这个管道可以将句子的首字母大写，实际开发中没怎么用过。

str1 = “hello world”

{{str1 | titlecase }}

结果

Hello World