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

Question

我已经阅读了Angular2的NgStyle文档.对我来说有点困惑.关于如何使用NgStyle与条件(if ... else)来设置任何元素的背景图像的任何想法？

Answer 1

人们也可以使用这种条件:

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

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

Answer 2

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

<div [ngStyle]="{'background-image': 'url(' + value ? image : otherImage + ')'}"></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]具有基于 if 和 else 情况的条件。

<label for="file" [ngStyle]="isPreview ? {'cursor': 'default'} : {'cursor': 'pointer'}">Attachment</label>