条件样式和绑定 [英] Conditional Styling and Binding

问题描述

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

In Angular 2 I am binding a dollar value like this inside a TABLE TD.

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

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

This dollarValue will be less than 0 or equal to 0 or greater than 0. When it is less than zero it should show up in "Red" color. When it is zero, nothing should show up. Just blank text. When it is greater than zero, it should use thousands separator and show the number.

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

How can I apply such conditional styling using Angular 2 binding? Is it even possible to do it ?

推荐答案

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

您还可以创建一个进行样式设置的指令(number管道除外)，以便更轻松地在不同元素上重用.

You can also create a directive that does the styling (except the number pipe) to make it easier to reuse over different elements.

柱塞示例

这篇关于条件样式和绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！