Angular学习笔记(三)之双向绑定

曾经终败给现在 2023-02-20 06:13 24阅读 0赞

首先，先看Angular官方中对数据绑定的描述：

数据绑定是一种机制，用来协调用户可见的内容，特别是应用数据的值。 虽然也可以手动从 HTML 中推送或拉取这些值，但是如果将这些任务转交给绑定框架，应用就会更易于编写、阅读和维护。 你只需声明数据源和目标 HTML 元素之间的绑定关系就可以了，框架会完成其余的工作。

也就是说把数据的绑定交给绑定框架去处理，开发人员只需要告诉框架绑定的框架是怎么样就行了。

在了解双向绑定前，先看看angular中都有哪几种数据绑定：

Angular 提供了多种数据绑定方式。绑定类型可以分为三类，按数据流的方向分为：

*  从*数据源到视图*
 *  从*视图到数据源*
 *  双向：*视图到数据源到视图*

<table> 
 <tbody> 
  <tr> 
   <th> <p>绑定类型</p> </th> 
   <th> <p>语法</p> </th> 
   <th> <p>分类</p> </th> 
  </tr> 
  <tr> 
   <td> <p>插值<br> 属性<br> Attribute<br> CSS 类<br> 样式</p> </td> 
   <td> <pre>content_copy<code>{
       {expression}}
[target]="expression"
bind-target="expression"</code></pre> </td> 
   <td> <p>单向<br> 从数据源<br> 到视图</p> </td> 
  </tr> 
  <tr> 
   <td> <p>事件</p> </td> 
   <td> <pre>content_copy<code>(target)="statement"
on-target="statement"</code></pre> </td> 
   <td> <p>从视图到数据源的单向绑定</p> </td> 
  </tr> 
  <tr> 
   <td> <p>双向</p> </td> 
   <td> <pre>content_copy<code>[(target)]="expression"
bindon-target="expression"</code></pre> </td> 
   <td> <p>双向</p> </td> 
  </tr> 
 </tbody> 
</table>

除插值以外的其它绑定类型在等号的左侧都有一个“目标名称”，由绑定符 `[]` 或 `()` 包起来， 或者带有前缀：`bind-`，`on-`，`bindon-`。

绑定的“目标”是绑定符内部的属性或事件：`[]`、`()` 或 `[()]`。

在绑定时可以使用**来源**指令的每个公共成员。 你无需进行任何特殊操作即可在模板表达式或语句内访问指令的成员。

通过上表的描述，我们知道了从数据源到视图用的是\[\]，然后从视图到数据源用的是（）,那么就知道了为什么双向绑定用符号\[(target)\]了，按照顺序也应该是中括号在外面，小括号在里面吧，呵呵，开玩笑，反正我是这么记得，记住就行。。

了解了上面的理论知识，操作起来其实很简单

上面是视图中的代码，然后在数据源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>  
          <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>   
          </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>

页面展现效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5ajEwODMxNw_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5ajEwODMxNw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200624094841857.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5ajEwODMxNw==,size_16,color_FFFFFF,t_70