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

【问题标题】：How to show color box in select tag in angular 2?如何在角度 2 的选择标签中显示颜色框？
【发布时间】：2018-07-10 09:05:00
【问题描述】：

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

我试过如下

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

但它不起作用。有没有可用的图书馆？请建议。

【问题讨论】：

你不能在
还有其他方法吗？
下面的答案应该可以正常工作！

标签： javascript angular html drop-down-menu angular-material

【解决方案1】：

我想这就是你要找的。

选择框的颜色变为选中选项的颜色。

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>

运行代码： https://stackblitz.com/edit/angular-rzb4rg

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

【讨论】：

是的。这就是我想要做的。谢谢伙计。

【解决方案2】：

你可以使用[ngStyle]

我在Stackblitz创建了一个演示

component.html

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

组件.ts

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

【讨论】：

当我选择颜色名称时。仅显示颜色名称。我想在那个框中显示颜色本身。
好的，让我检查一下
克里希纳感谢您的支持。但我正在寻找类似@Shaurya 发布的内容。

【解决方案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>

代码笔here

【讨论】：

【解决方案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>

【讨论】：