如何避免在Angular ngClass中重复?

时间:2019-10-30 17:16:47

标签: angular styling ng-class angular-ng-class

想象一下以下情况:

 <div *ngFor="let d of dm; first as first">
    <span
      [ngClass]="{ cSmall: !first, cGray: !first, cTab1: !first }"
    >
      {{ d }}
    </span>
  </div>

所有这些CSS类cSmall, cGray, cTab1都依赖于!first

我可以避免不必要的重复吗?

{ cSmall: !first, cGray: !first, cTab1: !first }

我已经尝试{ [cSmall,cGray,cTab1]: !first }了,但没有成功:)

2 个答案:

答案 0 :(得分:2)

尝试

<some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>

参考:NgClass API

答案 1 :(得分:2)

尝试以下操作:[ngClass]="{ 'cSmall cGray cTab1': !first }"