angular中动态控制样式；ngClass和ngStyle

ngClass

<p [ngClass]="{'red':true,'blue':false}">header works!</p>

<div [ngClass]="{'orange':flag,'green':!flag}">head</div>
<!-- ts中 -->
<!-- flag:Boolean=true; -->
<!-- 样式 -->
<!-- .orange{color:orange} -->
<!-- .green{color:green} -->


<ul>
    <li *ngFor="let item of arr;let i=index">
        <span [ngClass]="{'orange':item.age==13}">{{item|json}}---{{i}}</span>
    </li>
</ul>

<!-- public arr=[
    {name:"小丽",age:11},
    {name:"小步",age:12},
    {name:"小张",age:13},
    {name:"小王",age:14},
  ]; -->

ngStyle

<div [ngStyle]="{'background-color':attr}">ngStyle</div>
<!-- public attr='orange'; -->