本節中，我們來使用過濾器來顯示教師的注冊時間。 # 過濾器 `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 | - |