角度-如何应用[ ngStyle ]条件

我有一个 div，我想根据一个条件来设计它的样式。

如果 styleOne 是真的，我想要一个红色的背景色。如果 StyleTwo 为 true，我希望背景颜色为蓝色。我已经用下面的代码完成了一半的工作。

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

有没有可能加上一个条件说:

如果 styleOne 是真的，就这样做
如果 styleTwo 是真的，就这么做？

剪辑

我想我已经解决了。它的工作。不知道这是否是最好的方式:

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

312547 次浏览

小开

最佳答案

For a single style attribute, you can use the following syntax:

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

I assumed that the background color should not be set if neither style1 nor style2 is true.

Since the question title mentions ngStyle, here is the equivalent syntax with that directive:

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

小开

You can use an inline if inside your ngStyle:

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

A better way in my opinion is to store your background color inside a variable and then set the background-color as the variable value:

[style.background-color]="myColorVaraible"

小开

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

小开

<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>

小开

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