Angular中的内置管道

Angular 中的管道为您提供了一种直接在模板中转换数据的简单方法。 您可以创建自己的 自定义管道 ，还可以使用以下任何一种，它们是 CommonModule 的一部分，开箱即用：

这篇文章涵盖了 Angular 2 及更高版本

异步

Async 管道自动订阅 Observable 或 Promise 并在发出的值进入时返回它们：

<ul>
  <li *ngFor="let item of data | async">
    {{ item.name }}
  </li>
</ul>

货币

Currency 管道允许以不同的货币格式化数字：

{{ price | currency:'CAD' }}
{{ price | currency:'USD':true }}
{{ price | currency:'EUR':false:3.2-2 }}

• 第一个参数是带有本地货币代码的字符串。
• 第二个可能的参数是一个布尔值，用于显示将显示货币符号或货币代码。 默认值为 false 并显示货币代码。
• 第三种可能是十进制管道格式的字符串来格式化数字。

日期

使用 Date 管道格式化日期值：

{{ someDate | date:'medium' }}
{{ someDate | date:'fullDate' }}
{{ someDate | date:'yy' }}
{{ someDate | date:'Hm' }}

您可以使用许多符号来定义自定义格式，也可以使用许多预定义的关键字。 可用的关键字如下：'medium'、'short'、'fullDate'、'longDate'、 'mediumDate'、'shortDate'、'mediumTime'[X182X] 和 'shortTime'[X207X]。

有关符号列表，请参阅官方 API 参考 。

十进制

Decimal 管道格式化十进制值：

{{ decimalValue | number:'4.3-5' }}

在上面的例子中（'4.3-5'），4 是最小整数位数，3 是最小小数位数，5 是最大小数位数。

json

Json 管道可用于调试并将对象显示为 Json 字符串。 它在幕后使用 JSON.stringify：

{{ someObject | json }}

小写和大写

使用相应的管道将文本转换为小写或大写：

{{ user.name | uppercase }}
{{ user.name | lowercase }}

百分

Percent 管道将一个数字转换为它的百分比值：

{{ decimalValue | percent }}
{{ decimalValue | percent:'3.2-3' }}

可选参数是十进制管道格式的字符串。

片

使用 Slice 管道创建子集列表或字符串：

{{ someText | slice:3:6 }}
<ul>
  <li *ngFor="let item of someList | slice:2">
    {{ item }}
  </li>
</ul>

参数是开始索引和结束索引。 结束索引可以省略，结果列表或字符串将包含从开始索引到结束的所有内容。

👉 还有另外 2 个内置管道目前处于实验阶段：I18nPlural 和 I18nSelect。