Angular 基于值的动态颜色范围

我试图创建一个动态的颜色范围，以便我可以显示一些数据。例如，如果我有值[1.0,1.6,2.3,2.9,3.5,4.2,4.7,5.0]，那么我希望能够将例如1.0设置为绿色，2.5设置为黄色，5.0设置为红色，从而产生如下所示的屏幕截图

此处显示了角度的示例：

例如，我不仅仅想要一个从绿色到红色的范围，还可以是从黄色到紫色。我该怎么做呢？

一个新的小例子：

//our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <table style="width:100%">
        <tr>
          <th>value</th>
        </tr>
         <tr [ngStyle]="{'backgroundColor': 'rgba(0, 255, 0, 0.'+ n.toString().split('.')[1]  +')' }" *ngFor="let n of numbers">
          <td >{{n}}</td>
        </tr>
      </table>
    </div>
  `,
})
export class App {
  numbers:float[] = [1.1,1.3,1.4,1.9];
  constructor(){
    for(let n of this.numbers){
      console.log();
    }
  }


  //[ngClass]="{'red': n == 1, 'green': n == 2, 'orange': n == 3
      //          , 'pink': n == 4, 'blue': n == 5}"

}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {

}

普朗克：

---

你能计算出你想要的任何数字范围的不同颜色吗1，2，3，4，5。。并计算和区分不透明度。

我将为您提供值生成函数，您可以根据需要使用该函数

我正在考虑hsl类型的颜色，以提供不同的颜色在这里

基色值：hsl40、55%、95% 高色值：hsl140、55%、95% 现在，在模板中，您可能可以执行以下操作：

<li *ngFor="let d of attachColors()" [style.backgroundColor]="'hsl(' + d.color + ', 55%, 95%)'"></li>

---

首先创建并共享任何plunker或示例。@RohanFating我不知道如何实现我的要求，这就是我首先提出要求的原因，我认为没有plunker，我的帖子已经足够清晰了。虽然您的要求很明确，但如果您至少提供骨架结构代码，我们将不胜感激，这样我们就不需要从头开始工作。同时也要尊重他人。背景颜色应该影响到哪种元素？一个div，一个表单元格@格林先生，我加了一个例子，我说的是动态的，不是静态的。您实际上是手动将颜色指定给离散值。。。例如1.2或2.4怎么样？我希望它们的颜色分别不同于1号和2号。我试着让它工作，但它实际上并不适用于这种风格。作为旁注：使用const而不是let。我提供的模板示例不是经过测试的。我测试了按要求返回值的函数。@Esoemah这样做应该可以。。我把它修好了，但是由于某种原因，颜色不太正确。哦，很好。嗯，你可以使用范围，即基本值和高值。甚至可以尝试更改hsl颜色的其他参数。

<li *ngFor="let d of attachColors()" [style.backgroundColor]="'hsl(' + d.color + ', 55%, 95%)'"></li>