使用 *ngFor 时如何动态地将背景颜色应用于 angular 8 中的下拉列表

Question

HTML代码

<div class="form-group" style="display: flex !important;"
    *ngFor="let mesureitem of sampledetails.ActualMeasurements;let i = index">
    <div class="col pl-0">
        <label>Actual Status({{mesureitem.Name}}) </label>
        <select class="form-control" (change)="onChange($event)" [ngStyle]="{'background-color':selectedColor}"
            [(ngModel)]="mesureitem.ActualStatus">
            <option [ngValue]="selected" selected disabled>Select Status</option>
            <option *ngFor="let color of colors" [ngValue]="color.colorvalue" class="textColor"
                [ngStyle]="{'background-color':color.colorvalue}">{{color.name}}</option>
        </select>
    </div>
</div>     

TS代码

colors = [
    {
        id: 3,
        name: 'Replace',
        colorvalue: '#E60000'
    },
    {
        id: 1,
        name: 'Good',
        colorvalue: '#33CC33'
    },
    {
        id: 2,
        name: 'Monitor',
        colorvalue: '#FFA500'
    }
];

onChange(value) {
    for (var i = 0; i < this.colors.length; i++) {
        if (this.colors[i].id == value.target.selectedOptions[0].index) {
            this.selectedColor = value.target.selectedOptions[0].style.backgroundColor;
        }
    }
}      

> 1. 我有两个下拉列表，它们是从 API 动态获取的，当我自动选择一个下拉列表时，第二个下拉背景颜色也会受到影响>

Answer 1

问题是您将选定的值绑定到同一变量。

像这样改变ngStyle ，

[ngStyle]="{'background-color':mesureitem.ActualStatus}"

您可以删除不必要的onChange()函数和selectedColor变量。

演示： https : //stackblitz.com/edit/angular-fhyuzw