DAY13-Angular6之data binding-Two-way data binding

Two-way data binding with ngModel (中文:使用 ngModel 的 双向系结)

当开发数据输入表单时,通常都会显示 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

Step1:汇入 FormsModule

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 { }

Step2:添加变数和 html 标签

app\app.component.ts
-----
export class AppComponent implements OnInit {
    something = '我是something';
    showMyValue = '我是showMyValue';
}
app\app.component.html
-----

{{something}}

{{showMyValue}}

显示

https://ithelp.ithome.com.tw/upload/images/20181023/20107754N7E3mRGfDF.png

这边可以看到双向系结和单纯使用 click 事件的差异,使用 click 事件初始并无法绑定值

Step3:让第二个 input 绑定值

app\app.component.html
-----

{{something}}

{{showMyValue}}

显示
https://ithelp.ithome.com.tw/upload/images/20181023/20107754eiqibJmxeL.png

ngModel directive 帮你隐藏了繁重的细节,让你只要使用 ngModel 汇入和 ngModelChange 输出 就可以了!
https://angular.io/guide/template-syntax#ngmodel—two-way-binding-to-form-elements-with-ngmodel

Step4:将 [(ngModel)]=”something” ,拆开

app\app.component.html
-----

{{something}}

{{showMyValue}}

这种写法,就可以让双向系结的 改变事件,添加自定义事件

后话

data binding 是传递参数最重要的桥梁,原先是打算在 3 篇内写完,但是看完 Angular 官网再实际撰写,发现每一个 data binding 方法介绍,都有些许是还未使用到的,故消化吸收后再吐出来,几乎都超过原先想撰写内容,并几乎都超过 300 字太多了!就变成了 data binding 六连发XD~

DAY10-Angular6之data binding-Attribute
这篇是最少人看的(不算意外毕竟在JS的世界~),但私心推荐一下,它真的不好懂,但看懂可以避免掉 Attribute 和 Property 的误区,不至于满头问号!