Angular中数据的处理----管道

最新推荐文章于 2025-05-12 15:47:26 发布

原创最新推荐文章于 2025-05-12 15:47:26 发布 · 1.3k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#angular

本文详细介绍了Angular的内置管道，包括DatePipe、UpperCasePipe、LowerCasePipe、CurrencyPipe和DecimalPipe的使用方法。这些管道用于字符串、日期、货币等数据的格式化，例如日期的多种格式化选项、大小写的转换、货币的显示以及数字的小数点处理。示例代码展示了如何在模板中应用这些管道，以及如何进行链式管道操作。

管道用来对字符串、货币金额、日期和其他显示数据进行转换和格式化。管道是一些简单的函数，可以在模板表达式中用来接受输入值并返回一个转换后的值。 Angular 为典型的数据转换提供了内置的管道，包括国际化的转换（i18n），它使用本地化信息来格式化数据。

内置管道

数据格式化常用的内置管道如下：
DatePipe：根据本地环境中的规则格式化日期值。
UpperCasePipe：把文本全部转换成大写。
LowerCasePipe ：把文本全部转换成小写。
CurrencyPipe ：把数字转换成货币字符串，根据本地环境中的规则进行格式化。
DecimalPipe：把数字转换成带小数点的字符串，根据本地环境中的规则进行格式化。 PercentPipe：把数字转换成百分比字符串，根据本地环境中的规则进行格式化。

管道的使用

要转换的内容+管道操作符（|）+该管道的名字

例子1：UpperCasePipe与LowerCasePipe 大小写转换

TS里面定义参数

firstWord = "HELLO";
lastWord = "world";

HTML使用参数和管道

<p>转换为小写{{firstWord | lowercase}}</p>
<p>转换为大写{{lastWord | uppercase}}</p>

例子2：DatePipe日期格式化

TS里面定义参数

today= new Date();

HTML里面使用参数和管道

<!--1-->
<p>当前时间为{{today | date}}</p>
<!--2-->
<p>当前时间为{{today | date:'yyyy-MM-dd HH:mm:ss'}}</p>

链式管道：通过串联管道应用两种格式

下面展示日期链式管道的两种不同格式（‘shortDate’ 和 ‘fullDate’）

<p>当前时间为{{  today| date | uppercase}}</p>

<p>当前时间为{{  today| date:'fullDate' | uppercase}}</p>

<p>当前时间为{{  today| date:'fullDate' | uppercase}}</p>

例子3：CurrencyPipe货币管道

TS里面定义参数

a = 1.2345
b = 3.5672

HTML里面使用参数和管道

<p>{{a | currency:'USD':false}}</p>

<p>{{b | currency:'USD':true:'4.2-2'}}</p>

例子4 ：DecimalPipe小数管道

number管道用来将数字处理为我们需要的小数格式 ,接收的参数格式为{最少整数位数}.{最少小数位数}-{最多小数位数}
其中最少整数位数默认为1，最少小数位数默认为0，最多小数位数默认为3，当小数位数少于规定的{最少小数位数}时，会自动补0，当小数位数多于规定的{最多小数位数}时，会四舍五入

TS里面定义参数

num = 9.87654;

HTML里面使用参数和管道

<p>数字为{{num | number:'2.2-4'}}</p>