(精华)2020年8月2日 Angular ngClass,ngStyle的使用

<h1>属性[ngClass]</h1>
<!-- <div class="red">ngclass</div> -->

<!-- <div [class] = "{'blue':true,'red':false}">ngclass演示</div> -->

<div [class]="{'blue':flag,'red':!flag}">ngclass演示</div>

<!-- 循环数组，让数组的第一个元素的样式为red ,第二个为orange,第三个为blue -->


<ul>
  <li *ngFor="let item of list;let key=index;" [ngClass]="{'red':key==0,'orange':key==1,'blue':key==2}">
    {{key}}---{{item}}
  </li>
</ul>


<h1>属性[ngStyle]</h1>

<!-- <p style="color:red">我是一个p标签</p> -->

<p [ngStyle]="{'color':colorStr,'background':'#ccc'}">我是一个p标签</p>