Question

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

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

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

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

Answer 1

您不能在一个[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

Answer 2

尝试一下

[ngStyle] =“ {'height'：（（Card.duration.Hours == 1）？'130px'：height）}”

Answer 3

这项工作：

[ngStyle]="{'height': Card.duration.Hours == 1 ? '130px': ( Card.duration.Hours < 1 ? 100px : height)}"

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

3 个答案: