angular知识点--数据绑定

碎碎念：知识点梳理归纳，如果有什么不对的感谢大家指正一起学习！

数据绑定：
将组件控制器的属性和方法跟组件的模板连接起来

一、绑定语法

1. 插值表达式 {{ }}
   （将表达式的值显示在模板上）

<p>{{productTitle}}</p>

3. 属性绑定 [ ]
   （将标签属性绑定到表达式上）

<img [src]="imgUrl">
等价于
<img src="{{imgUrl}}">

4. 方法绑定 ()
   （将控制器的方法绑定到模板上事件的处理器）

<button (click)="addProduct()" >添加商品</button>

二、dom属性和html属性

1. dom属性和html属性区别

每一个html标签都是一个dom节点。
dom是一个element对象，每个dom都有自己的属性和方法
html属性是保持不变的，dom属性表示当前值

例1：变化的dom值

//html

<input type="text" value='Tom' (input)="doOnInput($event)" />

//ts

 doOnInput(event:any){
    console.log("dom-value",event.target.value);
  }

这个dom对象的value属性会被初始化为“Tom”，每次改变输入值的dom的值会跟着改变

---

例2: 不变的html值
(添加html值的打印)

//ts

  doOnInput(event:any){
    console.log("dom-value",event.target.value);
    console.log("html-value",event.target.getAttribute('value'));
  }

1. dom值可以被改变，而html的值是不变的。
2. html属性指定了初始值，html属性指定了dom属性的初始值任务就完成了

2. dom属性和html属性的关系

1. agular的模板绑定是通过dom属性和事件来工作的，而不是html属性
2. 就算名字相同，html属性和dom属性也不是同一样东西

三、html属性绑定

1. html 属性绑定

// attr.属性名=表达式（表达式的值会绑定到属性名上）

<td [attr.colspan]="tableColspan">Something</td>

2. css 类绑定

// test值会替换掉 aaa\bbb class

<p class="aaa bbb" [class]="test">Something</p>

// isSpwcial表达式的值是一个布尔值，为true的时候添加这个class

<p [class.special]="isSpwcial">Something</p>

ngClass可以同时控制多个css类是否显示

// 对象key值是类的名字，value是表达式

<p [ngClass]="{aaa:isA,bbb:isB}">Something</p>

3. 样式绑定style、ngStyle、ngClass、ng-switch

1. style

// isSpecial 值为true是color为红色，false为绿色
//可以带单位

<p [style.color]="isSpecial ? red : green">Something</p>
<p [style.font-size.px]="isSpecial ? 10 : 20">Something</p>

2. ngClass

// html 
<p [ngClass]="textClass">Something</p>

// css
.aaa{
  background-color:pink;
}
.bbb{
  font-size: 20px;
}

// ts
export class ProductComponent implements OnInit {

  textClass: any = {
    aaa: false,
    bbb: false
  };

  constructor(
  ) {
    setTimeout(() => {
      this.textClass = {
        aaa: true,
        bbb: true
      };
    }, 3000);
  }
  
}

绑定两个aaa,bbb的class，设置了一个定时，3秒后，表达式的值为true，样式成功添加

---

3. ngStyle

<p [ngStyle]="'color': isSpecital ? 'red' : 'green'">Something</p>

// html
<p [ngStyle]="textClass">Something</p>

// ts
export class ProductComponent implements OnInit {

  textClass: any = {
    background:'pink',
    color: 'blue'
  };

  constructor(
  ) {
    setTimeout(() => {
      this.textClass = {
        background:'blue',
        color: 'pink'
      };
    }, 3000);
  }

}

绑定多个样式，设置了一个定时，3秒后，样式改变成功

---

ngstyle 另一种写法

// html

<p [ngStyle]="textClass()">Something</p>

// ts

  textClass() {
  let styles = {
    'background-clor': this.red ? 'red' : 'pink',
    'font-size': this.font14 ? '16px' : '14px'
  };
  return styles;
  }

4. ngSwitch

• 根据ngSwitch绑定的模板表达式的返回值来决定添加那哪个模板元素到DOM节点上，并移除其他备选模板元素
• ngSwitch: 绑定到一个返回控制条件的值的表达式
• ngSwitchCase: 绑定到一个返回匹配条件的值的表达式
• ngSwitchDefault: 用于标记默认元素的属性

<!-- ngSwitch -->

<div [ngSwitch]="concatName">

  <p *ngSwitchCase="one">
    我叫小花
  </p>

  <p *ngSwitchCase="two">
    我叫小明
  </p>

  <p *ngSwitchDefault>
    我没有名字
  </p>

</div>

---

四、双向绑定-ngModel

使视图和模型保持同步
(无论哪一方被改变都会被立即同步)

// html

<input [(ngModel)]="name" value="name"/>
{{name}} 

// ts

export class ProductComponent implements OnInit {

  name: string = 'Tom';

  constructor(
  ) {
    setInterval(() => {
      this.name = 'jerry'
    }, 3000)
  }

}

---

ngModel绑定等价于

// html
<input [value]="name" (input)="doOnInput($event)">

// ts
 doOnInput(event: any) {
    this.name = event.target.value;
  }
  

默认值为-Tom改变输入的值，ngModel让模板和控制器的值同步，每隔三秒，定时重置又当前值为-jerry