(一 )数据绑定

    数据绑定,是将组件的控制器的属性绑定到模板上

    1.插值表达式:<h1>{{productTile}}</h1>

        使用插值表达式将一个表达式的值显示在模板上

    2.属性表达式:<img [src]="imgUrl" />,也可以用插值表达式

        使用【】将HTML标签的一个属性绑定到一个表达式上

    3.事件绑定:<button (click)="toProductDetail()">商品详情</button>

        使用()将组件控制器的一个方法绑定为模板上一个事件的处理器

2-8 数据绑定

4.Dom属性与html属性

    <input value="Tom" (input) = "onchange($event)"/>

    html属性初始化后不变,dom属性可以改变

2-8 数据绑定

2-8 数据绑定

2-8 数据绑定

5.HTML属性绑定

    1.基本Html属性绑定:<td [attr.colspan]="tableColspan">something</td>

    2.CSS类绑定:

            <div class="aaa bbb" [class]="someExpression">something</div> --替换原有的class

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

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

      3.样式绑定:

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

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

2-8 数据绑定

6.双向绑定

     <input [(ngModel)]="name">   

相关文章: