css - Angular 混合不同的 [ngClass] 表达式

Question

我想混合 [ngClass] Angular 中的表达式，首先我想向我的组件添加一个类数组，然后我还想添加一个基于 bool 表达式的类。 我可以用 <li [ngClass]="item.status"> 添加一个数组我可以添加一个基于 bool 表达式的类 <li [ngClass]="{active: item.active}">

注意: item.status 是一个类似item.status=['done', 'progressed'] 的数组

但是我怎样才能混合两种风格呢？ 以下不起作用，因为只有属性是重复的。 <li [ngClass]="item.status" [ngClass]="{active: item.active}">

提前致谢

Answer 1

因为你不可能有[ngClass]在同一元素中多次使用 [ngClass] 的组合和 class。当以这种方式使用 class 进行插值时，您还可以添加多个类。尝试使用以下方式。

例如HTML

<li  class="t-size {{item.status.join(' ')}}" [ngClass]="{'active': item.active }">

例如组件

 item = {
    status : ['done', 'progressed'],
    active: true
  }

例如CSS

.done{
  font-weight: bold;
}

.progressed{
  color:blue;
}

.t-size{
  font-size: 2rem;
}

.active{
  background-color: yellowgreen;
}

WORKING DEMO

希望对您有所帮助! :)