本節中我們使用`ng-if`指令將姓名一欄由`false`、`true`變更為`男`、 `女`。 # 小試牛刀 app.component.html ```html <pre> {{ teachers | json }} </pre> <table> <tr> <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>刪除</td> </tr> </table> ``` * ? 當`teacher.sex`為真時，顯示此行。 * ? 當`!teacher.sex`為真是，顯示此行。 # 本節小測 我們當前學習了兩個指令：`*ngFor`與`*ngIf`。除此以外，官方還為我們準備了多個常用的指令，你能在angular的中文官方站點上找到它們嗎？ ## 上節答案 * ?將error改成箭頭函數 ```js /* 定義error方法，用于數據請求失敗時被調用 */ const error = (response) => { console.log(response); console.error('請求出錯'); }; ``` * ?將success, error變成匿名函數，直接在調用`subscribe`時傳入。 ```js /* 使用get方法請求url，請求一旦成功后，將調用傳入的第一個方法；如果請求失敗，將調用傳入的第二個方法 */ this.httpClient.get(url) .subscribe((response: any) => { console.log(response); this.teachers = response; }, (response) => { console.log(response); console.error('請求出錯'); }); ``` # 測試  # 參考文檔 | 名稱 | 鏈接 | 預計學習時長(分） | | --- | --- | --- | | nfIf | [https://www.angular.cn/api/common/NgIf](https://www.angular.cn/api/common/NgIf) | 5 |