[ngClass]官方定义:从 HTML 元素上添加和移除 CSS 类。
参考链接:官方文档Angular中[ng-class]的使用
使用方法:
<some-element [ngClass]="'first second'">...</some-element>
<some-element [ngClass]="['first', 'second']">...</some-element>
<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>
<some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>
<some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>
其中key(例如代码中的first)值代表的是css样式,value值为boolean型,true为显示该样式,false为不显示该样式
代码实践:
<div [ngClass]="{'class1':flag1,'class2':flag2,'class3':flag3}">
<div class="data">
<p style="font-size:25px;">{{value1}}</p>
<p style=" height: 10%;margin-top: 11%">/{{value2}}%</p>
</div>
通过flag1,falg2,flag3来控制class1,class2,class3样式的显示