Angular 内置管道

AsyncPipe

从一个异步回执中解出一个值， 这个相信大家都不陌生我们经常使用的管道，该管道会订阅一个  Observable 或  Promise，并返回它发出的最近一个值。 当新值到来时，async 管道就会把该组件标记为需要进行变更检测。当组件被销毁时，async 管道就会自动取消订阅，以消除潜在的内存泄露问题。

<div>{{ value | async }}</div>
​
getCurrentTime() {
  this.value = new Observable<string>((observer: Observer<string>) => {
    setInterval(() => observer.next(new Date().toString()), 1000);
  });
}

DatePipe

日期管道：根据区域设置规则格式化日期值，仅当检测到输入值发生纯粹更改时才会执行，Angular 自带了  en-US 区域的数据。

<div>{{ value | date:'yyyy-MM-dd HH:mm:ss'}} </div> // 2022-08-18 18:45:45
<div>{{ value | date:'mm:ss' }} </div>          // 18:45
<div>{{ value | date:'fullDate' }} </div>   // Thursday, August 18, 2022
<div>{{ value | date:'shortDate' }} </div>  // 8/18/22
​
this.value = new Date().toString();


DecimalPipe

小数管道：根据数字选项和区域设置规则格式化值。区域设置确定组的大小和分隔符、小数点字符和其他特定于区域设置的配置。

对应的函数 formatNumber ( value: number, locale: string, digitsInfo?: string ): string {}

{{ value_expression | number [ : digitsInfo [ : locale ] ] }}
// digitsInfo: 设置数字和十进制表示
// locale: 指定要使用的区域设置格式规则，未提供时默认：en-US
​
<div>{{ 6.1234567 | number:'4.1-5' }}</div>     // 0,006.12346
<div>{{ 6 | number:'2.0-0' }}</div>     // 06
<div>{{ 0.6 | number:'1.0-0' }}</div>   // 1
<div>{{ 0.3 | number:'1.0-0' }}</div>   // 0

​JsonPipe

json 对象序列化：将值转换为其 JSON 格式表示形式用于调试。

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

this.value = [
  {
    _id: '62d67017508be32cd139e3df',
    name: '可筛选的时间',
    key: 'properties.keshaixuandishijian',
    type: 4
  }, 
  {  _id: '62d79af843fb2f07c63fd164',
   name: '自定义时间',
   key: 'properties.zidingyishijian',
   type: 4
  }
]

KeyValuePipe

将 Object 或 Map 转换为键值对数组。测试的时候发现顺序和原数据不同，看文档发现已说明：不传参时输出数组将通过键名排序（ 很鸡肋啊 ），可通过参数处理排序方式（示例二）

<div *ngFor="let item of object | keyvalue">
   {{ item.key }}:  {{ item.value }}
</div>

this.object = { name: 'lulu', key: 'key_id' };

// 输出： key: key_id, name: lulu 


<div *ngFor="let item of object | keyvalue: compareFn">
  {{ item.key }}: {{ item.value }}
</div>

compareFn = (a, b): number => {
  return 0;
};

this.object = { name: 'lulu', key: 'key_id' };

// 输出： name: lulu, key: key_id

SlicePipe

从一个  Array 或  String 中创建其元素一个新子集（slice）。

<span *ngFor="let i of value | slice: 1:3">{{ i }}</span>

value = ['a', 'b', 'c', 'd', 'e']

// 输出 b,c

PercentPipe

将数字转换为百分比字符串，根据确定组大小和分隔符、小数点字符和其他特定于区域设置的配置的区域设置规则进行格式化。区域默认为  en-US  

{{ 0.259 | percent }}
{{ 1.34955555 | percent:'2.3-5'}}

// 26% 、 134.95556%

LowerCasePipe、UpperCasePipe、TitleCasePipe

LowerCasePipe： 把文本转换成全小写形式，

UpperCasePipe： 把文本转换成全大写形式。

TitleCasePipe：把文本转换成标题形式。 把每个单词的第一个字母转成大写形式，并把单词的其余部分转成小写形式。

<div >
    <thy-input name="test" [(ngModel)]="value"></thy-input>
	{{ value | lowercase }}
	{{ value | uppercase }}
</div>

<div class="m-10">
   {{'tHIs is mIXeD CaSe' | titlecase }}
</div>
// 输出：This Is Mixed Case

End

学习渠道：

 https://angular.cn/api/common