条件样式和绑定

Question

在Angular 2中,我在TABLE TD中绑定了这样的美元值.

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

此dollarValue将小于0或等于0或大于0.当它小于零时,它应显示为"红色"颜色.当它为零时,什么都不应该出现.只是空白文本.当它大于零时,它应该使用千位分隔符并显示数字.

如何使用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的例子

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