Ng2中的管道

管道把数据作为输入，然后转换它，给出期望的输出。

应用实例

作者在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进行过滤点击查看官方文档。