Bedingt Stil Text in Angular2

Question

Ich habe eine Liste von Objekt wie folgt {Name: 'Susan', Nummer: 1}. Ich muss den Namen abhängig von der Nummer farbig darstellen (wenn die Nummer 1 ist, muss der Name rot sein, wenn 2 blau, wenn 3 grün und wenn 4 orange). In der Vorlage habe ich:

<p *ngFor="let item of data"> 
    {{item.name}} 
    </p> 

Wie ich diese achive kann?

Answer 1

können Sie NgClass verwenden.

In Komponente, ein Objekt wie folgt erstellen:

this.colorMap = { 
    1: 'my-red', 
    2: 'my-blue', 
    3: 'my-green', 
    4: 'my-orange' 
}; 

Und in Vorlage:

<p [ngClass]="colorMap[item.number]" *ngFor="let item of data"> 
    {{item.name}} 
</p> 

PLUNKER

Answer 2

können Sie verwenden class Eigenschaft Bindung

<p *ngFor="let item of data"> 
    <span [class.blue]="item.number === 1" [class.red]="item.number === 2" [class.green]="item.number === 3"> {{item.name}} </span> 
    </p> 

Alternativ können Sie die [style.color] Eigenschaft Bindung

<p *ngFor="let item of data"> 
    <span [style.color]="getColor(item.number)">{{item.name}}</span> 
</p> 

getColor(number){ 
    if(number ===1){ 
     return 'blue'; 
     }else if(number ===2) 
     { 
      return 'red'; 
     } else if(number ===3) 
      { 
       return 'green'; 
      }else { 
      return ''; 
      } 


} 

Answer 3

Verwendung NgClass:

myComponent.html

<p [ngClass]="getColor(item.number)" *ngFor="let item of data"> 
    {{item.name}} 
</p> 

myComponent.ts

@component({ 
    ... 
    templateUrl: './myComponent.html', 
    styles: [` 
     .red: { background-color: 'red'; } 
     .green: { background-color: 'green'; } 
     .blue: { background-color: 'blue'; } 
     .orange: { background-color: 'orange'; } 
    `] 
) 
export class MyComponent { 

    getColor(n:number) { 
    return { 
     'red': n === 1, 
     'green': n === 2, 
     'blue': n === 3, 
     'orange': n === 4 
    } 
}