快速使用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类的日志，这很混乱

[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