Angular数据绑定(3)--Html属性绑定

当元素没有dom属性的时候我们所以要用html属性绑定。

Html属性绑定分三种情况：基本Html属性绑定、CSS类绑定、样式绑定

 

1. 基本Html属性绑定。语法如下

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

  1) [att.colspan] 代表属性绑定，colspan是属性的名字；

  2) "tableColspan" 是一个表达式，他绑定在colspan这个属性的名字上；

 

2. CSS类绑定。就是为了控制class的，分三种方式。

    1）第一种方式。表达式someExpression的值用来控制myClassName1 myClassName2的值。

          注意这里是可以写多个class名的。

<div class="myClassName1 myClassName2" [class]="someExpression">something</div>

       上面代码是完全控制class的样式名字，假如我只想控制器中一个，其他的class类名不需要改变，我们可以换成另一种写法

 <div class="myClassName1" [class.myClassName2]="someExpression">something</div>

这里就是用了class. 的方法。

 

2）第二种方式。isSpecial表达式是个boolean值，当值是true的时候这个div就有这个class, 如果是false的时候就没有这个class.

<div [class.special]="isSpecial">something</div>

    3）第三种方式 [ngClass]指令方式。同时控制多个class。myClassName1和myClassName2是class的名字，他的isA和isB的boolean值分别控制各自的类是否存在。[ngClass]是一个指令。"{myClassName1: isA, myClassName2: isB}" 是个对象

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

 

3. 样式绑定。分2种方式

    1）第一种方式是控制样式属性。下面代码是 表达式的值控制了样式颜色是red 还是green。

<button [style.color]="siSpecial ? `red`: `green`">Red</button>

    2）第二种方式 [ngStyle]指令方式。

<div [ngStyle]="{`font-style`: this.myStyle ? `italic`: `normal`}">

[ngStyle] 是指令

font-style是样式名称

this.myStyle的值控制他的样式是 italic 还是 normal