angular中常见的管道及用法

原文链接：angular中常见的管道及用法 – 每天进步一点点 (longkui.site)

上一篇文章中，简单介绍了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.大小写转换

全部转换成大写

<div>
  {{str1 | uppercase}}
</div> 

全部转换成小写

<div>
  {{str2 | lowercase}}
</div> 

4.JSON序列化

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

object = {
    name: "张三",
    age: "2",
    "id":2
  }

然后在页面上使用下面的代码

<div>
    {{ object | json}}
</div>  

结果是

{ "name": "张三", "age": "2", "id": 2 }

然后，这个管道也接受数组形式，比如下面这样：

  object = [{
    name: "张三",
    age: "2",
    "id": 2
  },
  {
    name: "李四",
    age: "2",
    "id": 3
  },
  ]

5.字符串截取

  str1 = "hello world"

<div>
  {{str1 | slice:0:3}}
</div> 

结果是： hel

6.货币管道

主要用来显示货币，比如下面这样

  str2='12345678'
  str3=87654321

<div>
  {{ str2 | currency:'EUR'}}
</div>  

<div>
  {{str3 | currency:'CNY'}}
</div>  

结果为

€12,345,678.00
CN¥87,654,321.00

特别注意的是，人民币并不是RMB，而是CNY

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

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

7.百分比管道

 str4="1234"

<div>
  {{str4 | percent }}
 </div> 

结果为：

123,400%

这个管道会将数据乘100。

8.标题管道

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

str1 = "hello world"

<div>
  {{str1 | titlecase }}
 </div> 

结果

Hello World