在實際的前后臺對接過程中，后臺更傾向于把原始的數據發送給前臺。比如教師性別字段，往往返回給前臺是`0`和`1`，而不是`男`和`女`。前臺接收到原始值以后按實際的需求展示。 ## 使用boolean值表示男女 我們打開C層文件`app.component.ts`，將其中的性別由字符串類型修改為boolean類型。 ```typescript // 定義教師數組 teachers = [{ id: 1, name: '張三', username: 'zhangsan', email: 'zhangsan@yunzhiclub.com', sex: true ? }, { id: 2, name: '李四', username: 'lisi', email: 'lisi@yunzhiclub.com', sex: false, ? }]; ``` * ? true表示男，false表示女。  ## *ngIf 上節中我們學習了Angular的內置指令`*ngFor`，本節我們使用`*ngIf`來顯示性別。`*ngIf`的使用方法非常的簡單。 ```html <table> <tr> <th>序號</th> <th>姓名</th> <th>用戶名</th> <th>郵箱</th> <th>性別</th> <th>操作</th> </tr> <tr *ngFor="let teacher of teachers; index as i"> <td>{{ i + 1 }}</td> <td>{{ teacher.name }}</td> <td>{{ teacher.username }}</td> <td>{{ teacher.email }}</td> <td *ngIf="teacher.sex?">男</td> <td *ngIf="!teacher.sex?">女</td> <td>刪除</td> </tr> </table> ```  * ? `teacher.sex`為真時顯示宿主標簽 * ? `teacher.sex`為假時顯示宿主標簽 ## 結構化 上述的實現方案并不理想，原因是其破壞了代碼的`結構`，這很容易團隊中的其它小伙伴（包括一段時間后的自己）帶來誤傷。 其原因是上述代碼`table`中的第一個`tr`中我們輸出了5個`th`，但卻在第二個`tr`中輸出了6個`td`。而標準的HTML來中如果表格中的行列沒有經過合并，則第行中的列數必然是相等的，如果不相等則可以認為發生了錯誤。雖然我們是在使用Angular框架，其能夠動態的規劃HTML，但仍然不應該在模塊中給別人造成誤讀，或者說仍然不應該給團隊中的其它成員增加閱讀代碼的成本。 如果將代碼改成如下這樣，則規避了上述誤會。 ```html <tr *ngFor="let teacher of teachers; index as i"> <td>{{ i + 1 }}</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> ```  查看生成源碼： ```html <td _ngcontent-a-c16=""> <span _ngcontent-a-c16="">男</span> ? <!--bindings={ "ng-reflect-ng-if": "true" }--> <!--bindings={ "ng-reflect-ng-if": "false" }--> </td> <td _ngcontent-a-c16=""> <!--bindings={ "ng-reflect-ng-if": "false" }--> <span _ngcontent-a-c16="">女</span> ? <!--bindings={ "ng-reflect-ng-if": "true" }--> </td> ``` * ? 第一個`*ngIf`生效時 * ? 第二個`*ngIf`生效時 * ?? 以注釋出現的內容為angular自動生成，目的是幫助我們了解模板解析的過程 仔細觀察我們能夠輕易發現，在上述代碼中我們增加了冗余的標簽`<span>`。在大多數時候，這樣做無可厚非。在有些時候，比如我們在`css`中對樣式進行了精確的控制，則可能由于我們增加的這個`<span>`標簽而導致樣式失效。這時便可以使用`else`結合**永遠不會顯示出來**的`<ng-template>` ## else 與 ng-template 有`if`的地方，則必然可以使用`else`，Angular也不例外。 ```html <tr *ngFor="let teacher of teachers; index as i"> <td>{{ i + 1 }}</td> <td>{{ teacher.name }}</td> <td>{{ teacher.username }}</td> <td>{{ teacher.email }}</td> <td *ngIf="teacher.sex; else? femaleBlock?">男</td>? <td>刪除</td> </tr> </table> <ng-template? #femaleBlock?> <td>女</td>? </ng-template> ``` * ? else關鍵字出現在`*ngIf`中 * ? 該名字自己隨意起，作用是進行關鍵字的標識。當else條件成立時，Angular將按此標識去查找對應的元素（模板）。 * ? 與?相對應，表示else成立時使用本元素來替換`*ngIf`的宿主元素? * ? `<ng-template>`具有**永遠不會顯示出來**的特性，所以當else成立時，在生成的HTML代碼中也找不到`<ng-template>`的身影 * ? 做為`<ng-template>`中的內容，當else成立時，被用來替換`*ngIf`的宿主元素?  查看生成源碼： ```html <td _ngcontent-a-c16="">男</td> ... <td _ngcontent-a-c16="">女</td> ``` 在源碼出我們并沒有找到任何關于`<ng-template>`的信息，也印證了其**永遠不會顯示出來**的特性。 好了，休息，休息一會。 # 本節作業 請閱讀官方文檔中的[NgSwitch指令](https://www.angular.cn/guide/built-in-directives#the-ngswitch-directives)，**嘗試**使用 `ngSwitch` 來顯示性別。 # 資源列表 | 名稱 | 地址 | |---- | ---- | | API -> NgIf | [https://www.angular.cn/api/common/NgIf](https://www.angular.cn/api/common/NgIf) | | 內置指令 -> NgIf | [https://www.angular.cn/guide/built-in-directives#ngif](https://www.angular.cn/guide/built-in-directives#ngif) | | <ng-template>元素 | [https://www.angular.cn/guide/structural-directives#the-ng-template](https://www.angular.cn/guide/structural-directives#the-ng-template) | 本節源碼 | [https://github.com/mengyunzhi/angular11-guild/archive/step2.1.4.zip](https://github.com/mengyunzhi/angular11-guild/archive/step2.1.4.zip)