Angular學習筆記(三)之雙向綁定

首先，先看Angular官方中對資料綁定的描述：

資料綁定是一種機制，用來協調使用者可見的内容，特别是應用資料的值。 雖然也可以手動從 HTML 中推送或拉取這些值，但是如果将這些任務轉交給綁定架構，應用就會更易于編寫、閱讀和維護。 你隻需聲明資料源和目标 HTML 元素之間的綁定關系就可以了，架構會完成其餘的工作。
           

也就是說把資料的綁定交給綁定架構去處理，開發人員隻需要告訴架構綁定的架構是怎麼樣就行了。

在了解雙向綁定前，先看看angular中都有哪幾種資料綁定：

Angular 提供了多種資料綁定方式。綁定類型可以分為三類，按資料流的方向分為：

• 從資料源到視圖
• 從視圖到資料源
• 雙向：視圖到資料源到視圖

綁定類型	文法	分類
插值 屬性 Attribute CSS 類 樣式	content_copy {{expression}} [target]="expression" bind-target="expression"	單向 從資料源 到視圖
事件	content_copy (target)="statement" on-target="statement"	從視圖到資料源的單向綁定
雙向	content_copy [(target)]="expression" bindon-target="expression"	雙向

除插值以外的其它綁定類型在等号的左側都有一個“目标名稱”，由綁定符 

[]

 或 

()

 包起來， 或者帶有字首：

bind-

，

on-

，

bindon-

。

綁定的“目标”是綁定符内部的屬性或事件：

[]

、

()

 或 

[()]

。

在綁定時可以使用來源指令的每個公共成員。 你無需進行任何特殊操作即可在模闆表達式或語句内通路指令的成員。

通過上表的描述，我們知道了從資料源到視圖用的是[]，然後從視圖到資料源用的是（）,那麼就知道了為什麼雙向綁定用符号[(target)]了，按照順序也應該是中括号在外面，小括号在裡面吧，呵呵，開玩笑，反正我是這麼記得，記住就行。。

了解了上面的理論知識，操作起來其實很簡單

<input [(ngModel)]="name">
           

上面是視圖中的代碼，然後在資料源ts檔案中可以定義名稱name的變量，這樣一來，就實作了資料源中的name變量和視圖模闆中的input框資料的雙向綁定，任何一方發生變化，另一方的值就會發生變化。

然後基于上面的，結合網上的一個視訊，給一個表單控件（input、select、radio、checkbox、textarea）的簡單demo

1、建立項目，建立表單元件

ng new angulardemo
           

ng g component form
           

2、核心代碼

   app.module.ts 注意，需要導入FormsModule子產品

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FormComponent } from './demo/form/form.component';
import {FormsModule} from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    FormComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
           

app.component.html

<router-outlet></router-outlet>
<app-form></app-form>
           

form.component.css

*{
  margin: 0px;
  padding: 0px;
}
ul,li{
  list-style-type: none;
}
h2{
  text-align: center;
}
.people_list{
  width:400px;
  margin: 40px auto;
  padding: 20px;
  border: 1px solid #eeeeee;

}
.people_list li{
  height: 50px;
  line-height: 50px;
}
.people_list li .fonm_input{
  width: 300px;
  height: 28px;
}

.people_list submit{
  width: 100px;
  height: 30px;
  margin-top: 120px;
}


           

form.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {

  public peopleInfo: any = {
    username: '',
    sex: '2',
    cityList: ['北京', '上海', '深圳'],
    city: '上海',

    hobby: [{
      title: '吃飯',
      checked: false,
    }, {
      title: '睡覺',
      checked: false,
    }, {
      title: '敲代碼',
      checked: true,
    }],
    mark: ''
  };

  constructor() { }

  ngOnInit() {
  }

  doSubmit(){
    console.log(this.peopleInfo);
  }

}
           

form.component.html

<h2>人員登記系統</h2>

<div class="people_list">
  <ul>
    <li>姓名：<input type="text" id="username" [(ngModel)]="peopleInfo.username" class="fonm_input"></li>

    <li>性别：
      <input type="radio" value="1" name="sex1" id="sex1" [(ngModel)]="peopleInfo.sex"><label for="sex1">男</label>&nbsp;&nbsp;
      <input type="radio" value="2" name="sex2" id="sex2" [(ngModel)]="peopleInfo.sex"><label for="sex2">女</label>


    </li>
    <li>城市：
      <select name="city" id="city" [(ngModel)]="peopleInfo.city">

        <option *ngFor="let item of peopleInfo.cityList" [value]="item">{{item}}</option>
      </select>
      


    </li>

    <li>愛好：
      <span *ngFor="let item of peopleInfo.hobby;let key =index;">
            <input type="checkbox" [(ngModel)]="item.checked" [id]="'check'+key"><label [for]="'check'+key">{{item.title}}</label>&nbsp;&nbsp;&nbsp;
      </span>



    </li>
    <li>備注：
      <textarea name="mark" id="mark" cols="30" rows="10" [(ngModel)]="peopleInfo.mark"></textarea>



    </li>
    
  </ul>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>

  <button (click)="doSubmit()">擷取表單的值</button>

  <pre>
    {{peopleInfo| json}}
  </pre>

</div>
           

頁面展現效果：