条件样式和绑定答案

【问题标题】：Conditional Styling and Binding条件样式和绑定
【发布时间】：2016-12-23 17:14:29
【问题描述】：

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

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

这个 DollarValue 将小于 0 或等于 0 或大于 0。当它小于零时，它应该以“红色”颜色显示。当它为零时，什么都不应该出现。只是空白文本。当大于零时，应使用千位分隔符并显示数字。

如何使用 Angular 2 绑定应用这种条件样式？甚至有可能做到吗？

【问题讨论】：

您可以创建格式化管道。 angular.io/docs/ts/latest/guide/pipes.html

标签： angular conditional styling

【解决方案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

【讨论】：

完美！完全按照我的预期工作。谢谢你。 :)
谢谢 - 很高兴听到 :) 只是一个提示。在 SO 上，通常会投票而不是感谢 ;-) 如果答案解决了您的问题，您也可以将答案设为已接受的答案。
虽然 Adam 说它完全按预期工作，但我认为没有达到以下预期：“当它大于零时，它应该使用千位分隔符并显示数字。”您总是格式化数字（即使它是负数）。也许应该通过自定义管道进行格式化以消除负数的格式。
格式参数可以是eachOutlet.dollarValue | number:eachOutlet.dollarValue <= 0 ? '1.0-2' : '1.0-0'这样的表达式

【解决方案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;
}

【讨论】：

如果您要检查许多条件变量，这是一个完美而干净的答案。例如：“如果 X 为真，则检查 Y 和 Z”。

【解决方案3】：

我们可以这样做。

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

【讨论】：