Style et reliure conditionnels

Question

Dans Angular 2, je lie une valeur en dollars comme celle-ci dans une TABLE TD.

<td>
  {{eachOutlet.dollarValue}}
</td>

Ce dollarValue sera inférieur à 0 ou égal à 0 ou supérieur à 0. Quand il est inférieur à zéro, il doit apparaître en couleur "rouge". Quand il est zéro, rien ne devrait apparaître. Juste un texte vide. Lorsqu'il est supérieur à zéro, il convient d'utiliser un séparateur de milliers et d'afficher le nombre.

Comment puis-je appliquer un tel style conditionnel en utilisant Angular 2 binding? Est-il même possible de le faire?

Answer 1

<td>
  <span 
    *ngIf="eachOutlet.dollarValue != 0"
    [style.color]="eachOutlet.dollarValue < 0 ? 'red' : null">
      {{eachOutlet.dollarValue | number:'1.0-2'}}
  </span>
</td>

Vous pouvez également créer une directive qui applique le style (à l'exception du tube number afin de faciliter la réutilisation de différents éléments.

Exemple de Plunker

Answer 2

Une autre option pour plusieurs propriétés de style:

---

• Dans le modèle:

---

<div style="Word-break: break-all;" [ngStyle]="{ 'top': getTop() +'px', 'left': getLeft() +'px' }"> </div>

---

• Et dans la composante:

---

getTop(){
    return (this.topValueShowComment> 0)? this.topValueShowComment : 0;
}

getLeft(){
    return (this.leftValueShowComment> 0)? this.leftValueShowComment : 0;
}

Answer 3

Nous pouvons faire comme ça.

<div class="responsive-standalone--Overlay" (click)="mobileRMenu()" [style.display]="rMenu ? 'block' :'none'"></div>