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

x33g5p2x  于2022-03-06 转载在 其他  
字(0.7k)|赞(0)|评价(0)|浏览(242)
<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>

相关文章