Angular 2-动态添加内联CSS[style.color]

我有一个循环通过的数组。我的物体由颜色组成。 我想循环遍历数组，并使用内联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)';
    }

}

还有我的组件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>

键：{{item.Key}，值：{{item.value}

这里有三种方法

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

你好，颜色世界

你好，颜色世界
你好，颜色世界

找到它了吗