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

Question

В Angular 2 Я привязываю значение доллара, подобное этому в TABLE TD.

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

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

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

Answer 1

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

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

Plunker example

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