管道把数据作为输入,然后转换它,给出期望的输出。
应用实例
作者在ng2前台页面显示从后端数据库中查询的记录,记录中存在日期字段。在模型里,采用的是string类型存储日期,但是在前台采用下面的方式显示时:
<tr *ngFor="let item of financeDailyOverviewList">
<td>{{item.date}}</td>
<td>{{item.income}}</td>
<td>{{item.outlay}}</td>
<td>{{item.remark}}</td>
</tr>
此时显示在页面上的日期格式,成了标准的时间戳格式。如图:
引入管道
操作方式是在插值中引入管道,并进行格式化处理。
{{item.date| date:"yyyy-MM-dd"}}
解释上述修改:
其中,"|"是管道操作符,左侧是原来的插值。含义是:让左侧的日期插值数据通过管道操作符流入到右侧的日期管道中。并按照规定的格式进行格式化处理。
-
Date管道类。是一种Ng2框架内置的管道,作用是将左侧数据按照日期格式进行格式化。使用方法:
expression | date[:format]
,其格式参数可以查看API文档。
格式化之后的结果如下图:
多说一句
- Angular内置了一些管道,比如
DatePipe
、UpperCasePipe
、LowerCasePipe
、CurrencyPipe
和PercentPipe
。 它们全都可以直接用在任何模板中。 - 此外,管道可以组合使用。
学习更多管道的知识,可以参考官方API文档,并使用pipe进行过滤点击查看官方文档。