Angular2中的條件風格文本

Question

我有這樣的對象列表{name：'Susan'，number：1}。我需要根據數字顯示顏色的名稱（如果數字是1，名稱必須是紅色的，如果是2藍色，如果是3綠色，並且是4橙色）。 在模板中我有：

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

我該如何存檔？

Answer 1

您可以使用NgClass。

在組件，創建一個對象是這樣的：

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

而且在模板：

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

PLUNKER

Answer 2

可以使用class屬性綁定

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

或者您可以使用[style.color]屬性綁定

<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

使用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 
    } 
}