(精华)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>


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
 

文章来源: codeboy.blog.csdn.net，作者：愚公搬代码，版权归原作者所有，如需转载，请联系作者。

原文链接：codeboy.blog.csdn.net/article/details/107752622