Angular-5-双向绑定

（为了防止有人和我一样脑抽，想：“ngModel只能用于表单，那其他标签怎么双向绑定？”，我直接说了：插值语法中的变量如：{{a}}，它本身改变之后就会同步渲染html，也就是双向绑定了，如a：string=‘我是a’，之后执行过a=‘我不是a’后，页面自己就变化了。）

两种方法的区别，方法2可以通过js操作进行修改数值，方法1只能通过表单进行修改

方法1：

1.使用 [(ngModel)]="数值" 进行申明

2.只能用于表单元素

1.先在 app.module.ts/js中引入 FormsModule

import {FormsModule} from 'angular/forms';

@Ngmodule({
    ...,
    imports:[
        FormsModule
    ]
})

2.使用

<input [(ngModle)]="val" type="text">

<div>数值为：{{val}}</div>

方法2（只是单个组件绑定，分组直接看方法3）：

1.导入库，方法同上，从angular/forms中导入：ReactiveFormsModule，两个import都要写

2.在每个组件对应的ts/js文件中：导入FormControl

3.声明要使用的变量，这里是num

4.使用

//省略引入的步骤。。。。

1.组件对应的ts/js文件：
 import {FormControl} from 'angular/forms'

 num= new FormControl('默认值')

//（2）
changeNum(){
    this.num.setValue('9999')//必须通过set进行更改
}


2.html文件：
<input type="text" [formControl]="num">
<p>num:{{num}}</p>

//可以修改num，操作看第一步的文件中的 （2）
<button (click)="changeNum()">修改num</button>

方法3(方法2的完整版)：

1.导入库，方法同上，从angular/forms中导入：ReactiveFormsModule，两个import都要写

2.ts/js文件中引入 FromGroup

3.声明，和方法2的意思一样

4.使用（和2一样用setValue进行修改数值）

1.ts/js文件：
import {FormGroup,FormControl} from 'angular/forms'

formGroup_1 = new FormGroup({
    num:new FormControl('')
    age:new FormControl('')

})

submitFun(){
    console.log(this.formGroup_1.value)//获取一整组的数据，格式：{num:123,age:213}
}

2.html:
<form [formGroup]="formGroup_1">
    <input type="text" formControlName="num">
    <input type="text" formControlName="age">
    <button (click)="submitFun()">提交</button>//点击事件看1.
</form>
<div>num:{{num}}</div>
<div>age:{{age}}</div>

****可以<input type="text" formControlName="age" [(ngModle)]="age">，同时设置双向绑定 和 动态组件组获取一整组的数据