款式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