當開發數據輸入表單時,通常都會顯示 data property 並在用戶進行更改時更新該 property
Two-way data binding 要使用 NgModel directive 會更容易
FormsModule 是使用 NgModel 必須匯入的項目
在使用 NgModel directive 達到雙向資料綁定前,你必須要匯入 FormsModule 到 @NgModule 的 imports 清單
https://angular.io/guide/template-syntax#ngmodel---two-way-binding-to-form-elements-with-ngmodel
src/app/app.module.ts
-----
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // 匯入點
@NgModule({
imports: [
BrowserModule,
FormsModule // 匯入點
],
})
export class AppModule { }
app\app.component.ts
-----
export class AppComponent implements OnInit {
something = '我是something';
showMyValue = '我是showMyValue';
}
app\app.component.html
-----
<input type="text" [(ngModel)]="something">
{{something}}
<input type="text" (input)="showMyValue = $event.target.value">
{{showMyValue}}
顯示
這邊可以看到雙向繫結和單純使用 click 事件的差異,使用 click 事件初始並無法綁定值
app\app.component.html
-----
<input type="text" [(ngModel)]="something">
{{something}}
<input type="text" [value]="showMyValue" (input)="showMyValue = $event.target.value">
{{showMyValue}}
顯示
ngModel directive 幫你隱藏了繁重的細節,讓你只要使用 ngModel 匯入和 ngModelChange 輸出 就可以了!
https://angular.io/guide/template-syntax#ngmodel---two-way-binding-to-form-elements-with-ngmodel
app\app.component.html
-----
<input type="text" (ngModel]="something" (ngModelChange)="something = $event">
{{something}}
<input type="text" [value]="showMyValue" (input)="showMyValue = $event.target.value">
{{showMyValue}}
這種寫法,就可以讓雙向繫結的 改變事件,添加自定義事件
data binding 是傳遞參數最重要的橋樑,原先是打算在 3 篇內寫完,但是看完 Angular 官網再實際撰寫,發現每一個 data binding 方法介紹,都有些許是還未使用到的,故消化吸收後再吐出來,幾乎都超過原先想撰寫內容,並幾乎都超過 300 字太多了!就變成了 data binding 六連發XD~
DAY10-Angular6之data binding-Attribute
這篇是最少人看的(不算意外畢竟在JS的世界~),但私心推薦一下,它真的不好懂,但看懂可以避免掉 Attribute 和 Property 的誤區,不至於滿頭問號!