[ngClass]的简单使用

[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样式的显示