条件样式和绑定

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

Answer 3

我们可以这样做。

<div class="responsive-standalone--Overlay" (click)="mobileRMenu()" [style.display]="rMenu ? 'block' :'none'"></div>

条件样式和绑定

Conditional Styling and Binding

conditional

styling

angular