web-dev-qa-db-ja.com

Angular-[ngStyle]条件を適用する方法

条件に基づいてスタイルを設定する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'}">
angularng-style
14
MegaTron

単一のスタイル属性の場合、次の構文を使用できます。

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

style1もstyle2もtrueでもない場合、背景色を設定すべきではないと想定しました。

質問のタイトルにはngStyleが記載されているため、そのディレクティブと同等の構文を次に示します。

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

NgStyle内でインラインを使用できます：

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

私の意見では、打者の方法は、変数内に背景色を保存し、変数値として背景色を設定することです：

[style.background-color]="myColorVaraible"
6
Gili Yaniv
[ngStyle]="{'opacity': is_mail_sent ? '0.5' : '1' }"
3
Chaudhary