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>

頁面展現效果：