css - 使用 Angular 2 快速设置 html 样式的方法

Question

我的模板中有以下 ngFor

<span id="work-hour-span" *ngFor="let hour of hoursArray">{{hour}}</span>

我想要实现的是根据小时的值为这个跨度设置不同的颜色

例如，

如果小时在0到2之间，小时的文字颜色为红色，

如果小时在2到4之间，小时的文字颜色为蓝色，

如果小时在4到6之间，小时的文字颜色为绿色，

如果小时在6到8之间，小时的文字颜色为黄色，

如果小时在8到10之间，小时的文字颜色为紫色，

如果小时在10到12之间，小时的文字颜色为粉红色，

如果小时在12到14之间，小时的文字颜色为灰色，

我能想到的唯一方法是拥有一个非常困惑的 ng-class 的完整日志

[ngClass]="{redColor: hour < 2} [ngClass]="{blueColor: hour > 2 && hour < 4}...etc 

Answer 1

<span [style.color]="getColor(hour)" id="work-hour-span" *ngFor="let hour of hoursArray">{{hour}}</span>

getColor(hour) {
  switch(hour) {
    case 0:
    case 1:
      return 'red';
    case 2:
    case 3: 
      return 'blue';
    case 4:
    case 5:
      return 'green'
    ...
  }
}

出于性能原因，最好将 getColor() 移至管道

@Pipe({ name: 'hourColor' })
class HourColorPipe implements PipeTransform {
  transform(hour:number) {
      switch(hour) {
      case 0:
      case 1:
        return 'red';
      case 2:
      case 3: 
        return 'blue';
      case 4:
      case 5:
        return 'green'
      ...
    }
  }
}

<span [style.color]="hour | hourColor" id="work-hour-span" *ngFor="let hour