Combiner [NgStyle] avec Condition (si..autre)

J'ai lu la Documentation NgStyle pour Angular2 . Un peu déroutant pour moi. Toute idée sur la façon d'utiliser NgStyle avec une condition comme (si...else) pour définir l'image d'arrière-plan d'un élément?

24
demandé sur Christopher Moore 2016-05-05 16:09:21

4 réponses

L'utilisation d'un opérateur ternaire dans la liaison ngStyle fonctionnera comme une condition if/else.

<div [ngStyle]="{'background-image': 'url(' + value ? image : otherImage + ')'}"></div>
32
répondu Günter Zöchbauer 2018-05-23 19:46:53

On peut aussi utiliser ce genre de condition: 

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

Cela nécessite un peu moins de concaténation de chaîne...

31
répondu Zohar 2017-09-07 06:42:30

Les réponses ci-dessus n'ont pas fonctionné pour moi, j'ai donc décidé d'améliorer cela.

Vous devriez travailler avec url(''), et non avec value.

<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>
5
répondu Johnatan Maciel 2018-05-09 03:47:52

Vous pouvez l'utiliser comme suit:

<div [style.background-image] = "value ? 'url('+imgLink+')' : 'url('+defaultLink+')'"></div>
0
répondu somratexel 2018-10-04 06:59:26