在 Angular 中，我们经常需要在页面中显示不同格式的数据。例如，我们需要将日期格式化为特定的格式，将货币值转换为特定的货币符号等等。这时，我们就可以使用 Angular 中的 Pipe 来改变数据的显示格式。本文将介绍 Angular 中使用 Pipe 改变数据显示格式的方法和示例。
什么是 Pipe？
Pipe 是 Angular 中的一个特殊的组件，它用于改变数据的显示格式。Pipe 可以接收输入值并返回转换后的值，从而实现改变数据的显示格式的目的。Pipe 的使用非常灵活，我们可以使用 Angular 内置的 Pipe，也可以自定义 Pipe 来满足我们的需求。
内置 Pipe
Angular 提供了许多内置的 Pipe，可以满足我们常见的数据格式化需求。下面是一些常用的内置 Pipe。
DatePipe
DatePipe 用于将日期格式化为特定的格式。例如，我们可以将日期格式化为 "yyyy-MM-dd" 的形式。下面是一个示例：
<p>今天是 {{ today | date:'yyyy-MM-dd' }}</p>CurrencyPipe
CurrencyPipe 用于将货币值转换为特定的货币符号。例如，我们可以将货币值转换为美元符号的形式。下面是一个示例：
<p>这个商品的价格是 {{ price | currency:'USD' }}</p>PercentPipe
PercentPipe 用于将数值转换为百分比形式。例如，我们可以将数值转换为小数点后两位的百分比形式。下面是一个示例：
<p>这个商品的折扣是 {{ discount | percent:'2.2-2' }}</p>自定义 Pipe
除了内置 Pipe 外，我们还可以自定义 Pipe 来满足我们的需求。自定义 Pipe 可以接收任意类型的输入值，并返回任意类型的输出值，非常灵活。下面是一个示例，我们将自定义一个 Pipe，用于将字符串转换为大写字母的形式。
首先，我们需要创建一个新的 Pipe。在命令行中执行以下命令：
ng generate pipe upper
这将在项目中创建一个名为 "upper" 的新 Pipe。
接下来，我们需要在 upper.pipe.ts 文件中实现 Pipe 的逻辑。下面是一个示例：
-- -------------------- ---- -------
------ - ----- ------------- - ---- ----------------
-------
----- -------
--
------ ----- --------- ---------- ------------- -
---------------- -------- ------ -
-- -------- -
------ ---
-
------ --------------------
-
-在上面的代码中，我们定义了一个名为 "UpperPipe" 的 Pipe，并实现了它的 transform 方法。transform 方法接收一个字符串类型的输入值，并返回一个字符串类型的输出值。在我们的示例中，我们将输入值转换为大写字母的形式，并返回转换后的结果。
最后，我们需要在模板中使用我们的 Pipe。下面是一个示例：
<p>{{ 'hello world' | upper }}</p>在上面的代码中，我们使用了我们自定义的 "upper" Pipe，将字符串 "hello world" 转换为大写字母的形式，并将转换后的结果显示在页面上。
总结
在本文中，我们介绍了 Angular 中使用 Pipe 改变数据显示格式的方法和示例。我们学习了内置 Pipe，以及如何自定义 Pipe 来满足我们的需求。通过使用 Pipe，我们可以非常灵活地改变数据的显示格式，从而提高我们的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65867d54d2f5e1655d0f07eb