Angular 管道 Pipes用法示例

Angular 管道（Pipes）是一种用于在模板中对数据进行转换和格式化的机制。它们可以用于将日期、货币、文本等数据转换为所需的格式，以便在视图中显示。

以下是一些常见的 Angular 管道用法示例：

DatePipe：将日期对象转换为指定格式的字符串。例如，将日期对象转换为 "yyyy-MM-dd" 格式的字符串：

<p>{{ date | date:'yyyy-MM-dd' }}</p>

CurrencyPipe：将数字转换为货币格式。例如，将数字转换为美元格式：

<p>{{ price | currency:'USD':true }}</p>

PercentPipe：将数字转换为百分比格式。例如，将数字转换为百分比格式：

<p>{{ percentage | percent }}</p>

JsonPipe：将 JavaScript 对象转换为 JSON 字符串。例如，将对象转换为 JSON 字符串：

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

LowerCasePipe 和 UpperCasePipe：将文本转换为小写或大写格式。例如，将文本转换为小写格式：

<p>{{ text | lowercase }}</p>

SlicePipe：从数组中提取一部分元素。例如，从数组中提取前三个元素：

<ul>
  <li *ngFor="let item of items | slice:0:3">{{ item }}</li>
</ul>

AsyncPipe：订阅异步操作并自动更新视图。例如，订阅一个 Observable 并在其值更改时更新视图：

<p>{{ observable | async }}</p>

这些只是 Angular 管道的一些常见用法示例，实际上还有很多其他的管道可以使用。要了解更多关于 Angular 管道的信息，可以参考官方文档：https://angular.io/guide/pipes