html - Angular 2线性渐变绑定(bind)背景颜色

Question

静态值完美运行

 <div style="background: linear-gradient(to right, #0000FF 0%, #0000FF 50%, #FFA500 50%, #FFA500 100%);"></div> 

在我的 ts 中。

 this.blueColor = '#0000FF';
 this.orangColor = '#FFA500';

当我在 html 中绑定(bind)此变量时，出现模板错误。

<div style="background: linear-gradient(to right, {{blueColor}} 0%, {{blueColor}} 50%, {{orangColor}} 50%, {{orangColor}} 100%);"></div>

如何在其中绑定(bind)变量？

Answer 1

1. 你也可以在 ts 中使用变量:

   blueColor = '#0000FF'; orangColor = '#FFA500'; background="linear-gradient(to right,"+ this.blueColor + " 50%," + this.orangColor + " 0)";

   HTML:

   <div [style.background]="background"></div>

   See code

2. 在 HTML 中使用绑定(bind)

   <div [style.background]='"linear-gradient(to right,"+ this.blueColor + " 50%," + this.orangColor + " 0)"'></div>

   See code