【Angular2】模板語法之 ngModel
阿新 • • 發佈：2019-02-11
NgModel實現雙向繫結及其實現原理
討論[(ngModel)]之前，先講下屬性繫結和事件繫結。在屬性繫結中，值從模型中流動到檢視上的目標屬性。[]，通過把屬性名放在方括號中來標記出目標屬性。這是從模型到檢視的單向資料繫結。
在事件繫結中，值從檢視上的目標屬性流動到模型。()，通過把屬性名放在圓括號中來標記出目標屬性。這是從檢視到模型的（反向的）單向資料繫結。
所以，組合[]和()就可以實現雙向資料繫結和雙向資料流。
當開發一個數據錄入表單的時候，我們常常希望既可以顯示資料的屬性值，當用戶更改時，又可以更新資料的屬性值。
NgModel指令可以幫我們實現這個需求：
<input [(ngModel)]="currentHero.firstName"> <input [ngModel]="currentHero.firstName" (ngModelChange)="currentHero.firstName=$event">
在一般情況下直接使用[(ngModel)]實現雙向資料繫結，有一些特殊情況，比如將使用者的輸入強制轉換成大寫字母。
<input [ngModel]="currentHero.firstName" (ngModelChange)="setUpperCaseFirstName($event)">綜上：其實在我們平常的使用當中，直接使用[(ngModel)]完全可以滿足雙向資料繫結的要求，只有一些特殊情況下需要分開寫法。
參考資料：
http://www.cnblogs.com/JennyLin77/p/6141124.html