html - 根据两点在Div中绘制颜色

Question

比方说，我有两个背景颜色为红色的点，从 0 到 300。

现在，我想绘制 0 到 75 的绿色，75 到 150 的黄色。我有这些来自和两点，可以从 Typescript View 模型类中给出值。

<div style="background-color: red">
   <div style="background-color: green">
   </div>
   <div style="background-color: yellow">
   </div>
</div>

我的场景非常复杂，有 6-7 种不同的颜色。我的方法是正确的还是有更好的方法？我的应用是 TypeScript 和 Angular 2。

Answer 1

使用 ngStyle 或 [style.background-color]

    <div [ngStyle]="randomcss()">  
        <div [ngStyle]="randomcss()">
   </div>
</div>

组件

export class AppComponent {
    randomcss(){
      // based on your points return color 
     return {'background-color':'red'}
    }
}