Angular4 第五章 数据绑定

1.Dom属性和HTML属性的关系

（1）少量的HTML属性和DOM属性之间有着1:1的映射，如id

（2）有些HTML属性没有对应的DOM属性，如colspan

（3）有些DOM属性没有对应的HTML属性，如textContent

（4）就算名字相同，HTML属性和DOM睡醒也不是同一个东西

（5）HTML属性的值指定了初始值；DOM属性的值表示当前值。

         DOM属性的值可以改变；HTML属性的值不能改变。、

（6）模板绑定是通过DOM属性和事件来工作的，而不是HTML属性

2. DOM属性绑定

3.HTML属性绑定

（1）基本的HTML属性绑定

<td [attr.colspan]="TableColspan">son</td>

（2）css类绑定

【2-1】b表达式值完全替换原样式

 <div class="aaa bbb" [class]="someExpress">something</div>

【2-2】表达式值为true时显示

<div  [class.special]="表达式">something</div>

【2-3】控制多个css类是否显示

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

（3）样式绑定

【3-1】

<button [style.color]="isSpecial?'red':'green'>RED</button>

【3-2】

<div  [ngStyle]="{'font-style':this.canSave?'italic':'normal'}">something</div>

4.双向绑定

<input [(ngmodel)] ="name">
{{name}}

5.事件绑定

（1）等号右侧的表达式既可以是函数调用，也可以是属性赋值

（2）被绑定的事件既可以是标准的dom事件也可以是自定义事件

6.插值表达式和属性绑定是一个东西，代码中随便遵循一种风格

<img src="{{imgUrl}}" />
<img [src]="imgUrl" />