Angular的ngStyle ngClass attr

1、基本使用

        [ngStyle]="{'background-color':'blue'}"

        [ngClass]="{'classxxxx':true}"

        [attr.xxxx]='属性值'      //xxxx是自定义的标签属性，‘属性值’别加双引号。如果是angular页面里的变量，直接写变量就可以。

2、综合案例

        隔行变色，jquery单击获取angular添加的自定义属性。

        1、定义变量：

data=['row1','row2','row3','row4','row5']

        2、添加class

.class01{

cursor: pointer;

}

        3、for循环创建布局

<ul>
  <li *ngFor="let dat of data;let idx = index" [attr.customAttr01]=dat  [ngStyle]="{'background-color':idx % 2  === 0 ? 'green' : 'red' }"  [ngClass]="{'class01':true}" >{{dat}}</li>
</ul>

        4、使用jquery获取自定义属性

      $('.class01').click(function(){
        console.log($(this).attr("customAttr01"))
      })

        5、效果截图