本节中，我们来使用过滤器来显示教师的注册时间。 # 过滤器 `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> ``` * ➊ 添加表头 * ➋ 显示注册时间  ## 使用过滤器 过滤器的使用非常简单，只需要加入一个`|`（Backspace键下方），该符号又称为`管道符`，这有可能就是`管道`的由来。然后在输入管道的名称，比如我们此时用的是`date`日期管道。 ```html <td>{{teacher.createTime | date}}</td> ```  ## 增加过滤格式 `date`管道默认过滤出的数据是适用于国际友人的，想适用于国内的小伙伴，还需要加一些参数。 ``` <td>{{teacher.createTime | date: 'yyyy-MM-dd'}}</td> ```  # 本节小测 请尝试在官方文档中找到其它的过滤器。 ## 上节答案 在`*ngIf`指令的页面上依次点击：   或者，来到官方首页后，依次点击：  左侧的  然后找到：common  进而找到common中的指令  > 有意识的看官方手册是一种进步，会看官方手册是一种能力。 # 参考文档 | 名称 | 链接 | 预计学习时长(分） | | --- | --- | --- | | 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 | - |