5双向数据绑定

Angula中双向数据绑定只适用于表单，即视图改变会影响模型，模型改变会影响视图。要想使用双向数据绑定，首先要在app.module.ts里引入FormsModule

import {FormsModule} from "@angular/forms";

引入后还要在@NgModule的imports里声明FormsModule
然后就可以使用了，比如

<input type="text" [(ngModel)]="name" placeholder="请输入name"/><br />
{{name}}<br />

学习了如何使用双向数据绑定，那么就可以用利用双向数据绑定做个简单的例子了，能够更好的运用双向数据绑定，这个例子也是跟着教程上做的
先看一下效果：
引入组件组件，创建什么的前面说过，就不讲了，具体实现代码如下：
前台（.html）：

<div class="userList">
  <h3>登记系统</h3>
  <ul>
    <li>
      姓名：
      <input type="text" id="name" [(ngModel)]="userInfo.userName" />
    </li>

    <li>
      性别：
      <input type="radio" value="1" name="sex" [(ngModel)]="userInfo.sex" />男
      <input type="radio" value="0" name="sex" [(ngModel)]="userInfo.sex" />女
    </li>

    <li>
      部门：
      <select [(ngModel)]="userInfo.department">
        <option [value]="i" *ngFor="let i of departmentList">{{i}}</option>
      </select>
    </li>

    <li>
      爱好：
      <span *ngFor="let i of userInfo.hobby" id="hobby">
        <input type="checkbox" [(ngModel)]="i.checked" />{{i.content}}
      </span>
    </li>

    <li>
      其他：
      <textarea cols="30" rows="5" [(ngModel)]="userInfo.others"></textarea>
    </li>

  </ul>
  <input type="button" value="获取表单数据" (click)="getName()" id="myBtn"/>
  <pre>
  <!--直接userInfo会输出object,需要用json格式化-->
  {{userInfo|json}}
  </pre>
</div>

后台数据和方法（.ts）

departmentList=[
    "DEV",
    "QA",
    "PM",
    "ISO"
  ]
 

  userInfo: any = {
    userName: "Lanbo",
    sex: "1",
    department: "DEV",
    hobby: [
      {
        checked: true,
        content:"写代码"
      },
      {
        checked: false,
        content:"驾驶"
      },
      {
        checked: false,
        content:"看电影"
      }
    ],
    others:"Angular8"
  }


//方法写在ngOnInit里
getName() {
    //1：通过dom获取表单内容
    //let domName: any = document.getElementById("name");
    //console.log(domName.value);

    //推荐使用双向绑定
    console.log(this.userInfo);

样式(.css)

ul,ol{
  /*不显示小圆点*/
  list-style-type:none;
  line-height:40px;
}


.userList {
  width: 400px;
  border: 1px solid gray;
  /*居中*/
  margin: 0 auto;
  
}
/*设置li里的input样式*/
#name{
  width:80%;
  height:25px;
}


#myBtn{
  float:right;
  height:25px;
  margin-right:20px;
  margin-bottom:-20px;
}