angular - ng-model

Estilo condicional y vinculante

Question

En Angular 2 estoy vinculando un valor en dólares como este dentro de una 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, nada debería aparecer. Sólo texto en blanco. Cuando es mayor que cero, debe usar el separador de miles y mostrar el número.

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

Answer 1

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;
}

Answer 2

<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 el canal number ) para facilitar la reutilización de diferentes elementos.

Ejemplo de plunker