javascript - 如何在 Angular 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

我想这就是您正在寻找的。

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

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，这也是我们在生产中使用它的方式。