css - 在单个 NgStyle 标签中混合多个条件？

Question

我有一个 NgStyle 标签，我想在其中使用多个条件，但要么它不起作用，要么我收到错误。

到目前为止，这是我的代码:

 <div class = "card" [ngStyle]="{'height': Card.duration.Hours == 1 ? '130px': height}"
                      [ngStyle]="{'height': Card.duration.Hours < 1 ? '100px': height}"
  >

但只有第一个条件有效，当我想混合这些条件时，我收到错误。我怎么能有多个条件？

Answer 1

您不能在一个 div 标签中使用多个 [ngStyle]。使用 [ngClass] 代替。下面是我的示例。

HTML

<div  [ngClass]="{ 'height100': hours === 1, 'height200': hours === 2, 'height300': hours === 3}">
  test
</div>

TS

export class AppComponent  {

  hours: number = 3;

  constructor () {

  }
}

CSS

.height100 {
  height: 100px;
  background: red;
}

.height200 {
  height: 200px;
  background: yellow;
}

.height300 {
  height: 300px;
  background: green;
}

StackBlitz Demo