款式HTML与角2

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之间，小时的文本颜色是灰色的，

我能想到的唯一的办法是有一个整体的日志纳克级的，这是非常凌乱

[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