首页 > 解决方案 > 如何避免 Angular ngClass 中的重复?

问题描述

想象以下情况:

 <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 }过但没有成功:)

标签: angularstylingng-classangular-ng-class

解决方案


尝试

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

参考:NgClass API


推荐阅读