En Angular 2, estoy vinculando un valor en dólares como este dentro de un TABLE TD.

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

Este valor de dólar será menor que 0 o igual a 0 o mayor que 0. Cuando sea menor que cero, debería aparecer en color "Rojo". Cuando es cero, no debería aparecer nada. Solo texto en blanco. Cuando es mayor que cero, debe usar un separador de miles y mostrar el número.

¿Cómo puedo aplicar ese estilo condicional usando el enlace Angular 2? ¿Es posible hacerlo?

28
Adam 23 dic. 2016 a las 20:14

3 respuestas

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

También puede crear una directiva que haga el estilo (excepto la tubería number) para que sea más fácil reutilizarla en diferentes elementos.

Ejemplo de Plunker

56
Günter Zöchbauer 23 dic. 2016 a las 17:21

Otra opción para más de una propiedad de estilo:


  • En plantilla:

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

  • Y en el componente:

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

getLeft(){
    return (this.leftValueShowComment> 0)? this.leftValueShowComment : 0;
}
6
Dudi 13 sep. 2017 a las 08:28

Podemos hacer así.

<div class="responsive-standalone--Overlay" (click)="mobileRMenu()" [style.display]="rMenu ? 'block' :'none'"></div>
2
Mukesh Kumar Bijarniya 31 may. 2019 a las 16:17