[解決済み] Angular - [ngStyle]条件を適用する方法

質問

ある条件に基づいてスタイルを設定したいdivがあります。

styleOneがtrueの場合、背景色を赤にしたい。StyleTwoがtrueの場合、背景色を青にしたい。以下のコードで半分くらいは動作するようになった。

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

という条件を追加することは可能でしょうか？

• styleOneがtrueの場合、次のようにします。
• if styleTwo is true, do this?

編集

解決したようです。うまくいきました。ベストな方法かどうかは分かりませんが。

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

解決方法は？

1つのスタイル属性に対して、以下の構文を使用することができます。

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

のどちらにも該当しない場合は、背景色を設定しないものとしました。 style1 または style2 は true .

質問のタイトルにあるように ngStyle そのディレクティブと同等の構文がここにあります。

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