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

我有一个NgStyle标记，我想在其中使用多个条件，但是它不起作用或出现错误。

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

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

但是只有第一个条件有效，当我将它们混合使用时，会收到错误消息。我怎么有多个条件？

最佳答案

您不能在一个[ngStyle]标记中使用多个div。使用[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

关于css - 在单个NgStyle标签中混合多个条件？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56684834/