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

使用Angular 2

1 个答案: