且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

Angular2 - 根据值为元素设置不同的颜色

更新时间:2023-01-24 15:54:58

改变字体颜色有两种解决方案,但取决于您的要求

There are two solutions to change font color but depends on you requirement

  1. 如果您需要更改内联样式,那么您可以使用 angular NgStyle 指令,它为您更新 HTML 元素样式..
  1. If you requirement is change inline style then you can use angular NgStyle Directive which Update an HTML element styles for you..

NgStyle 指令示例:

<span [ngStyle]="{'color': proportion === '100' ? 'green' : 'red'}"></span>

        ---------------------- OR -----------------------------------

<span [style.color]="proportion === '100' ? 'green' : 'red'"></span>

  1. 如果您的要求是更改类,那么您可以使用 angular NgClass 指令,该指令在 HTML 元素上添加和删除 CSS 类...
  1. If you requirement is change class then you can use angular NgClass Directive which Adds and removes CSS classes on an HTML element...

NgClass 指令示例:

<span [ngClass]="{proportion === '100' ? 'green': 'red'}"></span>