Angular学习七：Angular数据绑定

Angular数据绑定

HTML属性与DOM属性关系

• 少量的HTML属性与DOM属性之间有着一对一的映射关系，如id；
• 有些HTML属性没有对应的DOM属性，如colspan；
• 有些DOM属性没有对应的HTML属性，如textContent；
• 就算名字相同，HTML属性和DOM属性也不是同一样东西；
• HTML属性的值指定了初始值，DOM属性的值表示当前值；HTML属性的值不可改变，DOM属性的值可以改变。
• 模板绑定是通过DOM属性和事件来工作的，而不是HTML属性。

注意： 插值表达式与属性绑定是同一个东西，插值表达式属于DOM属性绑定。

DOM属性绑定

DOM属性绑定流程：

HTML属性绑定

基本HTML属性绑定

<td [attr.colspan]="tableSpan">somethings<td>

css类绑定

情况一：
<div class="aaa bbb" [class]="someExpression">somethings</div>
情况二：
<div [class.special]="isspecail">somethings</div>
情况三：
<div [ngClass]="{aaa:isA, bbb:isB}">somethings</div>

样式绑定

情况一：
<button [style.color]="isspecail? 'red' : 'green' ">somethings</button>
情况二：
<div [ngStyle]="{'font-style':this.canSave}">somethings</div>

HTML属性绑定过程

管道 Pipe

Angular内置的常用管道：

uppercase 与 lowercase

uppercase 将字母转换成大写 {'aaa' | uppercase}
lowercase 将字母转换成小写 {'BBB' | lowercase}

Date

{ birthday | date: 'yyyy-MM-dd HH:mm:ss'}

number

{ pi | number: '2.2-2'}
2.2-2:表示是保留2位整数和2位小数。
2-2:表示最少2位小数，最大2位小数。

自定义管道

@Pipe({
  name: 'multiple' // 管道的名称
})
export class multiplePipe implements PipeTransform { // 实现PipeTransform 接口

  transform(value: number, args?: number): any {
    if (!args) {
      args = 1;
    }
    return value * args; 
  }
}
value: 原始值
args?: 参数值（可以多个），就是管道名冒号后的东西