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中使用内联：

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

我认为打击方式是将背景颜色存储在变量中，然后将背景颜色设置为变量值：

[style.background-color]="myColorVaraible"

Answer 3

Project

Answer 4

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

Answer 5

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