Angular 2 - 動態添加內聯CSS [style.color]

Question

我有一個數組，我循環。我的對象是顏色。 我想循環數組並使用內聯CSS動態設置顏色。

我已經試過：

[ngStyle]="{ 'color': 'item.value'}" 
[style.color]={{item.value}} 
[style.color]="{{item.value}}" 

如何設置顏色？

export class ColorSelectorComponent { 

    private color: string = "rgb(236,64,64)"; 
    private color2: string = "rgb(236,64,64)"; 
    private color3: string = "rgb(236,64,64)"; 
    private color4: string = "rgb(236,64,64)"; 
    private color5: string = "rgba(45,208,45,1)"; 
    private color6: string = "#1973c0"; 
    private color7: string = "#f200bd"; 

    private arrayColors: any = {}; 
    private selectedColor: string = 'color'; 

    constructor(private cpService: ColorPickerService) { 

     console.log(this.arrayColors); 
     this.arrayColors['color'] = '#2883e9'; 
     this.arrayColors['color2'] = '#e920e9'; 
     this.arrayColors['color3'] = 'rgb(255,245,0)'; 
     this.arrayColors['color4'] = 'rgb(236,64,64)'; 
     this.arrayColors['color5'] = 'rgba(45,208,45,1)'; 
    } 

} 

而且我compontent HTML

<ul> 
    <li *ngFor="let item of arrayColors | keys">   
     <div class="color-drop" [style.color]="{{item.value}}" ></div> 
     Key: {{item.key}}, value: {{item.value}} 
    </li> 
</ul> 

Answer 1

這裏有3種方式

<p [style.color] = "result > 30 ? 'blue' : 'green'"> Hello Color World! </p> 
<p bind-style.color = "result > 30 ? 'blue' : 'green'"> Hello Color World! </p> 
<p style.color = "{{result > 30 ? 'blue' : 'green'}}"> Hello Color World! </p> 

發現它​​