Angular 中常用的管道有哪些？

推荐答案

在 Angular 中，常用的管道包括：

1. DatePipe：用于格式化日期。
2. UpperCasePipe：将字符串转换为大写。
3. LowerCasePipe：将字符串转换为小写。
4. CurrencyPipe：将数字转换为货币格式。
5. DecimalPipe：将数字格式化为带有小数点的字符串。
6. PercentPipe：将数字转换为百分比格式。
7. JsonPipe：将对象转换为 JSON 字符串。
8. SlicePipe：用于截取数组或字符串的一部分。
9. AsyncPipe：用于处理异步数据流（如 Observable 或 Promise）。
10. KeyValuePipe：将对象转换为键值对数组。

本题详细解读

DatePipe

DatePipe 用于格式化日期。它可以根据提供的格式字符串将日期对象转换为特定格式的字符串。例如：

{{ today | date:'yyyy-MM-dd' }}

这将把 today 变量格式化为 YYYY-MM-DD 格式的日期字符串。

UpperCasePipe 和 LowerCasePipe

UpperCasePipe 和 LowerCasePipe 分别用于将字符串转换为大写和小写。例如：

{{ 'Hello World' | uppercase }}  // 输出: HELLO WORLD
{{ 'Hello World' | lowercase }}  // 输出: hello world

CurrencyPipe

CurrencyPipe 用于将数字转换为货币格式。它可以指定货币符号和小数位数。例如：

{{ 1234.56 | currency:'USD':'symbol':'1.2-2' }}

这将把数字 1234.56 格式化为 $1,234.56。

DecimalPipe

DecimalPipe 用于将数字格式化为带有小数点的字符串。例如：

{{ 3.14159265 | number:'1.2-2' }}

这将把数字 3.14159265 格式化为 3.14。

PercentPipe

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

{{ 0.75 | percent }}

这将把数字 0.75 格式化为 75%。

JsonPipe

JsonPipe 用于将对象转换为 JSON 字符串。例如：

{{ { name: 'John', age: 30 } | json }}

这将把对象 { name: 'John', age: 30 } 转换为 JSON 字符串 { "name": "John", "age": 30 }。

SlicePipe

SlicePipe 用于截取数组或字符串的一部分。例如：

{{ 'Hello World' | slice:0:5 }}  // 输出: Hello
{{ [1, 2, 3, 4, 5] | slice:1:3 }}  // 输出: [2, 3]

AsyncPipe

AsyncPipe 用于处理异步数据流，如 Observable 或 Promise。它会自动订阅和取消订阅，并在数据变化时更新视图。例如：

{{ observable$ | async }}

这将自动显示 observable$ 的最新值。

KeyValuePipe

KeyValuePipe 用于将对象转换为键值对数组。例如：

{{ { name: 'John', age: 30 } | keyvalue }}

这将把对象 { name: 'John', age: 30 } 转换为数组 [{ key: 'name', value: 'John' }, { key: 'age', value: 30 }]。