源代碼：

@Component({selector: "app-root",template: `<input [(ngModel)] = "jerry">` }) export class AppComponent implements AfterViewInit {_jerry = "Hello";ngAfterViewInit(): void {setTimeout(() => {this._jerry = "changed!";}, 2000);}get jerry(){return this._jerry; }set jerry(n){this._jerry = n;}get header(){console.log('Jerry');return true;} }

運(yùn)行時(shí)，首先顯示Hello，兩秒鐘過后變成changed!

頁(yè)面渲染時(shí)，自動(dòng)觸發(fā)jerry property的get函數(shù)：

當(dāng)在input字段里輸入值時(shí)，觸發(fā)jerry屬性的set函數(shù)：

eval @ VM960:1 set jerry @ app.component.ts:59 AppComponent_Template_input_ngModelChange_0_listener @ app.component.ts:42 executeListenerWithErrorHandling @ core.js:21821 wrapListenerIn_markDirtyAndPreventDefault @ core.js:21863 schedulerFn @ core.js:37186 __tryOrUnsub @ Subscriber.js:183 next @ Subscriber.js:122 _next @ Subscriber.js:72 next @ Subscriber.js:49 next @ Subject.js:39 emit @ core.js:37094 viewToModelUpdate @ forms.js:7031 updateControl @ forms.js:3519 (anonymous) @ forms.js:3490 _handleInput @ forms.js:436 DefaultValueAccessor_input_HostBindingHandler @ forms.js:458 executeListenerWithErrorHandling @ core.js:21821 wrapListenerIn_markDirtyAndPreventDefault @ core.js:21863 (anonymous) @ platform-browser.js:976 invokeTask @ zone-evergreen.js:399 onInvokeTask @ core.js:41647 invokeTask @ zone-evergreen.js:398 runTask @ zone-evergreen.js:167 invokeTask @ zone-evergreen.js:480 invokeTask @ zone-evergreen.js:1621 globalZoneAwareCallback @ zone-evergreen.js:1647

更多Jerry的原創(chuàng)文章，盡在：“汪子熙”:

總結(jié)

以上是生活随笔為你收集整理的Angular里ngModel双向绑定的一个使用例子的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。