如何在角度2的选择标签中显示颜色框？

Question

我需要在选择标签下拉列表中显示一组颜色框，如下所示。

我尝试过如下操作

<select>
  <option value="">Choose Color</option>
  <option value="red"><div class="color-box" style="background-color: #FF850A;"></div></option>
  <option value="green"></option>
  <option value="blue"></option>
  <option value="yellow"></option>
 </select>

但是它不起作用。有没有可用的图书馆？请提出。

Answer 1

您可以使用[ngStyle]

我已经在Stackblitz上创建了一个演示

  

component.html

<select>
  <option *ngFor="let datas of data" [ngStyle]="{'background-color': datas.color}">{{datas.name}}</option>
</select>

  

component.ts

data=[{
    name:'Red',
    color:'red'
  },{
    name:'green',
    color:'#008000'
  }]

Answer 2

我想这就是您要寻找的。

选择框的颜色更改为所选选项的颜色。

APP.COMPONENT.TS

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  selectedColor = '';

  colors = [
    {
      name: 'yellow',
      value: '#ffff00'
    },
    {
      name: 'red',
      value: '#ff3300'
    },
    {
      name: 'blue',
      value: '#0000ff'
    }
  ];

  onChange(value){
    this.selectedColor = value;
  }
}

APP.COMPONENT.HTML

<select (change)="onChange($event.target.value)" [ngStyle]="{'background-color':selectedColor}">
    <option *ngFor="let color of colors" [value]="color.value" [ngStyle]="{'background-color':color.value}"></option>
</select>

运行代码： link

在组件本身中创建列表的优点是，您可以在不更改HTML的情况下添加或编辑尽可能多的选项，这也是我们在生产中使用它的方式。

Answer 3

只需将您的样式应用于选项标签，它便会按预期工作：

     <select>
      <option value="">Choose Color</option>
      <option value="red" style="background-color: #FF850A;"></option>
      <option value="green"></option>
      <option value="blue"></option>
      <option value="yellow"></option>
     </select>

Codepen here

Answer 4

您可以做的是为选项写上背景色。请参见下面的代码！

<option value="">Choose Color</option>
<option style="background-color: #FF850A;" value="red"></option>
<option value="green"></option>
<option value="blue"></option>
<option value="yellow"></option>