Angular 角度-如何应用[ngStyle]条件

我有一个div，我想根据一个条件来设计它

如果styleOne是真的，我想要一个红色的背景色。如果StyleTwo为真，我希望背景颜色为蓝色。我已经用下面的代码完成了一半

是否可以添加一个条件来说明：

• 如果styleOne为真，请执行此操作
• 如果styleTwo是真的，那么这样做吗

编辑

我想我已经解决了。它起作用了。不确定这是否是最好的方式：

---

对于单个样式属性，可以使用以下语法：

我假设如果

style1

和

style2

都不是

true

，则不应设置背景色

---

由于问题标题提到了

ngStyle

，以下是该指令的等效语法：

---

如果在ngStyle中，您可以使用内嵌样式：

[ngStyle]="styleOne?{'background-color': 'red'} : {'background-color': 'blue'}"

我认为最好的方法是将背景色存储在变量中，然后将背景色设置为变量值：

[style.background-color]="myColorVaraible"

[ngStyle]="{'opacity': is_mail_sent ? '0.5' : '1' }"

<ion-col size="12">
  <ion-card class="box-shadow ion-text-center background-size"
  *ngIf="data != null"
  [ngStyle]="{'background-image': 'url(' + data.headerImage + ')'}">

  </ion-card>

[ngStyle]="{ 'top': yourVar === true ? widthColumHalf + 'px': '302px' }"