Объединить [NgStyle] с условием (if..else)

Я прочитал Документация NgStyle для Angular2. Немного смущает меня. Любая идея о том, как использовать NgStyle с условием типа (if... else), чтобы установить фоновое изображение любого элемента?

ОТВЕТЫ

Ответ 1

Использование троичного оператора внутри привязки ngStyle будет работать как условие if/else.

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

Ответ 2

Можно также использовать такое условие:

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

Для этого требуется немного меньше конкатенации строк...

Ответ 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>

Ответ 4

Вы можете использовать это следующим образом:

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

Ответ 5

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