结合 [NgStyle] 与条件 (if..else)

Question

我读过NgStyle Documentation For Angular 2，这让我有点困惑。我如何使用 NgStyle 和类似 (if...else) 的条件来设置任何元素的背景图像？

Answer 1

在 ngStyle 绑定中使用三元运算符将起到 if/else 条件的作用。

<div [ngStyle]="{'background-image': 'url(' + value ? image : otherImage + ')'}"></div>

Answer 2

也可以用这种条件：

<div [ngStyle]="myBooleanVar && {'color': 'red'}"></div>

它需要更少的字符串连接...

Answer 3

之前的答案对我不起作用，所以我决定改进这个。

您应该使用 url('')，而不是值。

<li *ngFor="let item of items">
  <div
    class="img-wrapper"
    [ngStyle]="{'background-image': !item.featured ? 'url(\'images/img1.png\')' : 'url(\'images/img2.png\')'}">
  </div>
</li>

Answer 4

您可以按如下方式使用它：

<div [style.background-image]="value ? 'url(' + imgLink + ')' : 'url(' + defaultLink + ')'"></div>

Answer 5

使用：

[ngStyle]="{'background-image': 'url(' +1=1 ? ../../assets/img/emp-user.png : ../../assets/img/emp-default.jpg + ')'}"

Answer 6

添加和简化 Günter Zöchbauer 的示例，以防使用 (if...else) 设置背景图像以外的内容：

<p [ngStyle]="value == 10 && { 'font-weight': 'bold' }">

Answer 7

<h2 [ngStyle]="serverStatus == 'Offline'? {'color': 'red'{'color':'green'}">Server with ID: {{serverId}} is {{getServerStatus()}} </h2>

或者你也可以这样使用：

<h2 [ngStyle]="{backgroundColor: getColor()}">Server with ID: {{serverId}} is {{getServerStatus()}}</h2>

并且在 *.ts

getColor(){return this.serverStatus === 'Offline' ? 'red' : 'green';}

Answer 8

I have used the below code in my existing project

<div class="form-group" [ngStyle]="{'border':isSubmitted && form_data.controls.first_name.errors?'1px solid red':'' }">
</div>

Answer 9

Trying to set background color based on condition:   

Consider variable x with some numeric value.    
<p [ngStyle]="{ backgroundColor: x > 4 ? 'lightblue' : 'transparent' }">
        This is a sample Text
</p>

Answer 10

[ngStyle] 带有基于条件的 if 和 else 大小写。

附件

结合 [NgStyle] 与条件 (if..else)

Combine [NgStyle] With Condition (if..else)

angular2-template

angular

结合 [NgStyle] 与条件 (if.​​.else)

Combine [NgStyle] With Condition (if..else)

angular2-template

angular

结合 [NgStyle] 与条件 (if..else)