本节中,我们来使用过滤器来显示教师的注册时间。 # 过滤器 `pipe`管道在大部分框架中又被称为`filter`过滤器。无论是管道还是过滤器,只是叫法不同而且,它们的作用都是用来进行数据的转换。 在中学的化学实验中,我们在进行物质的过滤的时候接触过过滤器。有村里盖房子的时候,我们通常要把沙子中的过大的颗粒过滤出来,也接触过过滤器。但在现实生活中,过滤器往往只会把多的东西过滤少了,且过滤后的物质必然存在于过滤前的物质之中。而我们此时提的过滤器,功能远远不止不此。它不止可以把多的过滤少了,把粗的过滤精了,还可以把少的过滤多了,把有的过滤没了,甚至于把一种物质过滤成另一种物质。 > 所以计算机的过滤器的作用可以描述为:`把原有的数据按固定的规则转换成另外一种数据`。 # 日期过滤器 下面,我们共同使用日期管道,将教师的注册时正确的显示出来。 ## 添加注册时间字段 app.component.html ```html <table> <tr> <th>序号</th> <th>姓名</th> <th>用户名</th> <th>邮箱</th> <th>性别</th> <th>注册时间</th> ➊ <th>操作</th> </tr> <tr *ngFor="let teacher of teachers" > <td>{{teacher.id}}</td> <td>{{teacher.name}}</td> <td>{{teacher.username}}</td> <td>{{teacher.email}}</td> <td> <span *ngIf="teacher.sex">女</span> <span *ngIf="!teacher.sex">男</span> </td> <td>{{teacher.createTime}}</td> ➋ <td>删除</td> </tr> </table> ``` * ➊ 添加表头 * ➋ 显示注册时间 ![](https://img.kancloud.cn/20/0b/200b193c60df6bc1cd979b02371040c9_510x91.png) ## 使用过滤器 过滤器的使用非常简单,只需要加入一个`|`(Backspace键下方),该符号又称为`管道符`,这有可能就是`管道`的由来。然后在输入管道的名称,比如我们此时用的是`date`日期管道。 ```html <td>{{teacher.createTime | date}}</td> ``` ![](https://img.kancloud.cn/da/0e/da0e9c1b25c8850c245bc8c594cdfadc_504x85.png) ## 增加过滤格式 `date`管道默认过滤出的数据是适用于国际友人的,想适用于国内的小伙伴,还需要加一些参数。 ``` <td>{{teacher.createTime | date: 'yyyy-MM-dd'}}</td> ``` ![](https://img.kancloud.cn/df/1f/df1f0ced435002d7ef8d4165be9b339a_487x86.png) # 本节小测 请尝试在官方文档中找到其它的过滤器。 ## 上节答案 在`*ngIf`指令的页面上依次点击: ![](https://img.kancloud.cn/09/60/09602a1ec6b68c486c3bfb605797a8e1_985x303.png) ![](https://img.kancloud.cn/5b/e8/5be8ffccd385ad4b311713c1e4fba26d_1165x592.png) 或者,来到官方首页后,依次点击: ![](https://img.kancloud.cn/6a/95/6a95ab7edc70ca3d2a16c96269d9214f_600x174.png) 左侧的 ![](https://img.kancloud.cn/2c/22/2c22bcb44637a7ce221f40fe144c2ac9_367x138.png) 然后找到:common ![](https://img.kancloud.cn/e3/ee/e3ee7decfdefd6767a4e0f46f37bc622_641x468.png) 进而找到common中的指令 ![](https://img.kancloud.cn/5b/e8/5be8ffccd385ad4b311713c1e4fba26d_1165x592.png) > 有意识的看官方手册是一种进步,会看官方手册是一种能力。 # 参考文档 | 名称 | 链接 | 预计学习时长(分) | | --- | --- | --- | | DatePipe | [https://www.angular.cn/api/common/DatePipe](https://www.angular.cn/api/common/DatePipe) | 5 | | 源码 | https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step2.2.6 | - |