無法設置選擇標籤的當前項目的角度爲2的綁定背景顏色

Question

我試圖將背景顏色綁定到選定標籤的當前項目。

我認爲它必須工作，因爲我真的將顏色參考對象分配給綁定到ngModel的currentColorDefinitin變量。

但它不起作用，爲什麼？

HTML

<select style="width:150px;" class="form-control" [(ngModel)]="currentColorDefinition"> 
    <option [style.background-color]="item.backgroundcolor" *ngFor="let item of colorDefinitions" [ngValue]="item"> 
    </option> 
</select> 

組件

colorDefinitions: Color[] = [ 
new Color("#000000", "#FFFFFF"), // black 
new Color("#FF0000", "#FFFFFF"), // yellow 
]; 
currentColorDefinition: Color; 
this.currentColorDefinition = this.colorDefinitions[0]; 

Answer 1

這工作我用引導4.適合高興我設計的休息權，因爲這個下拉我還有一個按鈕，現在我可以換兩個按鈕一個按鈕組:-)

<div ngbDropdown> 
    <button [style.background-color]="currentColorDefinition.backgroundcolor" class="btn" id="dropdownMenu1" 
     ngbDropdownToggle>Farbe</button> 
    <div class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
     <button style="height:20px;" name="colorer" (click)="setColor(item)" 
     class="dropdown-item" *ngFor="let item of colorDefinitions" [value]="item" [style.background-color]="item.backgroundcolor">{{item.foregroundcolor}}</button> 
    </div> 
</div> 

Answer 2

這似乎只能用原始值的工作：

型號：

export class Color { 
    first: string; 
    second: string; 

    constructor(f : string, s : string) { 
     this.first=f; 
     this.second =s; 
    } 
} 

HTML：

<select [(ngModel)]="currentColorDefinition.first"> 
    <option *ngFor="let item of colorDefinitions" 
      [selected]="currentColorDefinition.first == item.first ? true : null" 
      [value]="item.first" 
      [style.background-color]="item.first"> 
      {{item.first}} 
    </option> 
</select>