将 [NgStyle] 与条件组合 (if..else)答案

【问题标题】：Combine [NgStyle] With Condition (if..else)将 [NgStyle] 与条件组合 (if..else)
【发布时间】：2016-08-31 07:03:57
【问题描述】：

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

【问题讨论】：

标签： angular angular2-template

【解决方案1】：

[ngStyle] 使用基于条件的 if 和 else 情况。

附件

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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>

【讨论】：

【解决方案4】：

我在现有项目中使用了以下代码

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

【讨论】：

【解决方案5】：

<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';}

【讨论】：

【解决方案6】：

添加和简化 Günter Zöchbauer 的示例 incase 使用 (if...else) 设置除背景图像之外的其他内容：

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

【讨论】：

【解决方案7】：

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

您应该使用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>

【讨论】：

【解决方案8】：

用途：

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

【讨论】：

【解决方案9】：

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

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

【讨论】：

【解决方案10】：

也可以使用这种条件：

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

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

【讨论】：

这是迄今为止最有用的例子，因为它在满足条件时设置样式，否则保持不变。
我们如何使用这个“if”以及使用像 Gunter 的答案这样的真正“if else”的样式，所有这些都在同一个 ngStyle 中？无法轻松创建新 div 但需要这样做