Angular - 如何应用[ngStyle]条件

Question

我有一个div,我想根据条件设置样式.

如果styleOne为true,我想要一个红色的背景颜色.如果StyleTwo为true,我希望背景颜色为蓝色.我有一半使用下面的代码.

<div id="myDiv" [ngStyle]="styleOne && {'background-color': 'red'}">

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

• 如果styleOne为true,请执行此操作
• 如果styleTwo为true,那么这样做吗？

编辑

我想我已经解决了.有用.不确定这是否是最佳方式:

<div id="div" [ngStyle]="styleOne && {'background-color': 'red'} || styleTwo && {'background-color': 'blue'}">

Answer 1

对于单个样式属性,您可以使用以下语法:

<div [style.background-color]="style1 ? 'red' : (style2 ? 'blue' : null)">

我认为,如果没有背景颜色不应设置style1也不style2是true.

由于问题标题提到ngStyle,这里是与该指令等效的语法:

<div [ngStyle]="{'background-color': style1 ? 'red' : (style2 ? 'blue' : null) }">

Answer 2

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

Answer 3

如果在ngStyle内，则可以使用内联：

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

我认为，一种更常见的方法是将背景色存储在变量中，然后将background-color设置为变量值：

[style.background-color]="myColorVaraible"

Answer 4

<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>