Angular - 如何应用 [ngStyle] 条件

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) }">