带条件的CSS属性

Question

我正在使用Angular Application。我需要根据条件不重复（即创建两个卡片并使用隐藏和 show 属性显示）显示卡片的颜色。

示例

数组中A的

值可以是或否

<div class="card">
<div class="card-titile">Sample</div>
<div class ="card-body">
`
`
`             //Some codes
`
`
`
</div>
</div>

如果A的值为“是”，则我必须将此卡显示为红色，如果不是，则必须将其显示为黄色。

Answer 1

您可以使用[style.color]

<div [style.color]="A == 'yes' ? 'red' : 'yellow'"></div>

如果要添加多种样式，请使用ngClass

 <div [ngClass]="A == 'yes' ? 'red' : 'yellow'"></div>

See working code

Answer 2

使用角度表达式，将A的内容作为类添加到卡中。然后，使用css为这些类声明适当的彩色样式。

Answer 3

您可以在dom元素等中使用ngClass

<div [ngClass]="{'red-class': A === 'yes','yellow-class':A === 'no'}">

或者您也可以有条件地应用样式，例如

<div [ngStyle]="{'color':A == 'yes' ? 'red' : 'yellow'}"></div>