Условный стиль и привязка

В Angular 2 я привязываю значение доллара, подобное этому в ТАБЛИЦЕ TD.

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

Этот долларовый вал будет меньше 0 или равен 0 или больше 0. Когда он меньше нуля, он должен отображаться в "красном" цвете. Когда он равен нулю, ничего не должно появляться. Просто пустой текст. Когда он больше нуля, он должен использовать разделитель тысяч и показывать номер.

Как я могу применить такой условный стиль, используя привязку Angular 2? Возможно ли это сделать?

Ответ 1

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

Вы также можете создать директиву, которая делает стиль (кроме number), чтобы упростить повторное использование над различными элементами.

Пример плунжера

Ответ 2

Другая опция для более чем одного свойства стиля:

В шаблоне:

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

И в компоненте:

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

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