在同時啟動后臺、前臺的基礎上，我們進行對接測試，打開地址：[http://localhost:4200/edit/1](http://localhost:4200/edit/1)，得到如下結果并且未在控制臺中發生錯誤，說明對接成功。  # 表單綁定 在新增教師的小節中，我們學習了數據雙向綁定，成功的實現了在C層中獲取V層表單中的最新數據。本節我們在新增教師代碼的基礎上，稍做調整。 TeacherEditComponent ``` export class TeacherEditComponent implements OnInit { ... /** * 提交表單 */ onSubmit(): void { console.log('submit'); } } ``` teacher-edit.component.html ``` <pre>{{teacher | json}}</pre> <form id="teacherEditForm①" (ngSubmit)="onSubmit()"> ② <div> <label for="name">姓名：</label> <input type="text" id="name" name="name" [(ngModel)]="teacher.name"/> ? </div> <div> <label for="username">用戶名：</label> <input type="text" id="username" name="username" [(ngModel)]="teacher.username"> ? </div> <div> <label for="email">郵箱：</label> <input type="email" id="email" name="email" [(ngModel)]="teacher.email"> ? </div> <div> <label>性別：</label> <label> <input type="radio" name="sex" value="true" [(ngModel)]="teacher.sex"> 男</label> ? <label> <input type="radio" name="sex" value="false" [(ngModel)]="teacher.sex"> 女</label> ? </div> <div> <button>提交</button> </div> </form> ``` * ? 由以前直接綁定`name`等變量，改為綁定`teacher`對象的`name`屬性。 ## 測試 瀏覽[http://localhost:4200/edit/1](http://localhost:4200/edit/1)并測試：  雖然大體得到了我們想要的結果，查控制臺中發生了一個錯誤： ``` TeacherEditComponent.html:5 ERROR TypeError: Cannot read property 'name' of undefined at Object.eval [as updateDirectives] (TeacherEditComponent.html:5) ``` 它在說在TeacherEditComponent.html的第5行上發生了一個類型錯誤，不能夠在`undefined`上讀取`'name'`屬性。該錯誤產生的原因是這樣： TeacherEditComponent ``` export class TeacherEditComponent implements OnInit { public teacher: any; ? ... ngOnInit(): void { ? const id = this.route.snapshot.paramMap.get('id'); const url = 'http://localhost:8080/Teacher/' + id; this.httpClient.get(url) .subscribe((data) => { this.teacher = data; ? }, () => { console.log(`請求 ${url} 時發生錯誤`); }); } ? ... } ``` 組件的執行順序如下： * ? 定義了變量teacher，聲明類型為任意類型`any`，并使用`undefined`對其進行初始化。 * ? V層渲染前，執行`ngOnInit()`方法。 * ? 該方法執行完畢后，渲染V層。 * ? V層第一次渲染，由于`teacher`的值為`undefined`所以控制臺報錯。 * ? V層第二次渲染，由于`teacher`的值為`undefined`所以控制臺報錯。 * ? 用獲取到的值對`teacher`賦值。 * ? V層第三次渲染，由于`teacher`當前的值為對象，且存在`name`屬性，所以成功的進行綁定。 > 至于為什么會在執行?以前渲染兩次V層并不屬于本教程的討論范圍，如果你真的對它有極濃厚的興趣。可以在教程學習完成后，嘗試閱讀：[生生命周期勾子](https://www.angular.cn/guide/lifecycle-hooks#lifecycle-hooks)，或許你能找到自己想要的答案。 發生錯語的原因找到了，那么解決該錯誤的方法就很簡單了。 TeacherEditComponent ``` public teacher: any; ? public teacher: any = {}; ? ? ``` > 在教程中我們將使用`?`來表示由原文件中刪除該行代碼，用`?`來表示在文件中增加代碼。所以上述代碼的實現含義為：將`public teacher: any;`修改為:`public teacher: any = {};` * ? 定義變量的同時使用`{}`來賦初值，規避了變量定義后默認為`undefined`的問題。 > `{}`和`undefined`是有本質區別的。`{}` ：存在該對象，但該對象是張白紙；`undefined`不存在該對象。比如現在我計劃養一條白毛狗，并把狗的名字起名為`大白`，此時`大白`就等于是`undefined`；過后的幾天我真的買回來了一條剛出生的小狗，而它就是我的`大白`，此時`大白`就等于是`{}`。 再次測試控制臺打印的異常便如期消失了。 ## true與"true" 但最終的問題仍然沒有修正，通過查看V層的打印數據我們發現后臺是成功了回傳了教師的性別sex字段的。但在V層中卻沒有成功的選重性別，這是為什么呢？  我們隨便的點擊一個性別觀察發生了什么：  后臺返回的是`true`，而點擊V層的性別后，設置的值是`"true"`。問題的關鍵就在于此：`true`的類型為`boolean`，在數據存儲時占用1個bit；而`"true"`是個`string`，在數據存儲時，最少占用4*8 = 32個bit。`true`與`"true"`僅僅是在顯示時長的像了一些而已。那么解決這個問題的方法應該有兩個：1 讓`spring`返回性別的時候，返回字符串代替boolean。2 angular V層中進行性別綁定時，使用boolean代替字符串。 我們在開發系統的時候，特別是前后臺進行對接的時候經常會遇到此類的問題，這時候就應該討論下事情的本質應該是個什么樣子了。比如性別字段，它的本質就是`boolean`非真既假，那么此時后臺的數據返回就沒有錯，處理該問題需要來處理前臺。在`angualr`中的模板驅動表單中，可以使用`[value]`指令來綁定表單中的`boolean`值。 teacher-edit.component.html ``` <label> <input type="radio" name="sex" value="true" [(ngModel)]="teacher.sex"> 男</label> ? <label> <input type="radio" name="sex" value="false" [(ngModel)]="teacher.sex"> 女</label> ? <label> <input type="radio" name="sex" [value]="true" [(ngModel)]="teacher.sex"> 男</label> ? <label> <input type="radio" name="sex" [value]="false" [(ngModel)]="teacher.sex"> 女</label> ? ``` 保存文件后瀏覽器自動刷新后成功的綁定了教師的姓別。 ***** 甲方技術認為：我需要快速的來解決我所遇到的當前問題，只要能解決問題那么就是好的，什么數據庫的第一范式、第二范式都是狗屁，對什么面向接口、面向對象全部嗤之以鼻。 我們認為：事情應該是個什么樣子就得是個什么樣子，規范化才能規避一些意想不到的問題，才能夠最大限度的減少文檔，減少大家的溝通成本。這是一種本質的開發理念的沖突，堅持規范可能并不是最快的解決方案，但一定是最優的解決方案。 ***** # 參考文檔 | 名稱 | 鏈接 | 預計學習時長(分） | | --- | --- | --- | | 使用ngModel進行雙向數據綁定 | [https://www.angular.cn/guide/forms#two-way-data-binding-with-ngmodel](https://www.angular.cn/guide/forms#two-way-data-binding-with-ngmodel) | 5 | | 生命周期勾子 | [https://www.angular.cn/guide/lifecycle-hooks](https://www.angular.cn/guide/lifecycle-hooks) | 15 | | 源碼地址 | [https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step2.4.3](https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step2.4.3) | - |