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

我想这就是你要找的。

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

应用组件.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(应用程序组件.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,这也是我们在生产中使用它的方式。

你可以用 [ngStyle]

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

组件.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'
  }]

只需将您的样式应用于选项标记,它就可以按预期工作:

     <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

你能做的就是为选项写背景色。请参见下面的代码!

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