Question

我正在尝试将background-color绑定到selected-tag的当前项目。

我认为它必须有效，因为我确实将颜色引用对象分配给绑定到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

它似乎仅适用于原始值：

型号：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.example.tibblist.attkapp.MainActivity">

<FrameLayout
    android:id="@+id/content"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1">

</FrameLayout>

<android.support.design.widget.BottomNavigationView
    android:id="@+id/navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:background="?android:attr/windowBackground"
    app:menu="@menu/navigation" />

</LinearLayout>

HTML：

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

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

Answer 2

这对我来说使用bootstrap 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>

无法在角度2中设置带有绑定背景颜色的select-tag的当前项目

2 个答案: