Angular

Question

我有一个 div 想要根据条件设置样式。

如果 styleOne 为真，我想要红色背景。如果 StyleTwo 为真，我希望背景颜色为蓝色。我有一半使用下面的代码。

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

是否可以加条件说：

如果 styleOne 为真，则执行此操作
如果 styleTwo 为真，执行此操作？

编辑

我想我已经解决了。有用。不确定这是否是最好的方法：

<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 中，你可以使用内联：

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

在我看来，一个更好的方法是将背景颜色存储在一个变量中，然后将 background-color 设置为变量值：

[style.background-color]="myColorVaraible"

Answer 3

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

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>

Answer 5

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

Angular - 如何应用 [ngStyle] 条件

Angular - How to apply [ngStyle] conditions

ng-style