本节中我们使用`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 |