有角材料；mat-select 显示选定的颜色

Question

我有这段代码来显示用户可以选择的颜色列表：

<form>
    <h4>mat-select</h4>
    <mat-form-field appearance="fill">
        <mat-label>Favorite Color</mat-label>
        <mat-select [(ngModel)]="selectedValue" name="food">
            <mat-option *ngFor="let color of allColors" [value]="'#' + color.value">
                <!-- {{color.label}}  -->
                <span class="color-span" [ngStyle]="{ 'background-color': '#' + color.value }"></span>
            </mat-option>
        </mat-select>
    </mat-form-field>

</form>

import {Component} from '@angular/core';
/**
 * @title Select in a form
 */
@Component({
  selector: 'select-form-example',
  templateUrl: 'select-form-example.html',
})
export class SelectFormExample {
  public allColors: any[] = [
  {label: 'FFFFFF', value: 'FFFFFF'},
  {label: '000000', value: '000000'},
  {label: '603813', value: '603813'},
  {label: 'FF0000', value: 'FF0000'},
  {label: '2E3192', value: '2E3192'},

  {label: '006837', value: 'FFD400'},
  {label: 'F15A24', value: 'F15A24'},
  {label: 'CCCCCC', value: 'CCCCCC'},
  {label: 'DBC0B5', value: 'DBC0B5'},
  {label: 'FAB49B', value: 'FAB49B'},

  {label: '87B2C7', value: '87B2C7'},
  {label: 'ACD58A', value: 'ACD58A'},
  {label: 'FFF9AE', value: 'FFF9AE'}
];
}

它的工作原理如下图所示。但我不知道如何在垫选择控件中显示选定的颜色。

演示

Answer 1

如果您想自定义所选值，您可以使用它们的选择器mat-select-trigger。它允许您自定义当选择具有值时显示的触发器。

参考：- https://material.angular.io/components/select/api

您可以像下面这样修改代码，以在用户选择值时显示颜色。

<mat-select [(ngModel)]="selectedValue" name="food">
    <mat-select-trigger>
        <span [ngStyle]="{ 'background-color': selectedValue }"/>
    </mat-select-trigger>
    <mat-option *ngFor="let color of allColors" [value]="'#' + color.value">
        <!-- {{color.label}}  -->
        <span class="color-span" [ngStyle]="{ 'background-color': '#' + color.value }"/>
    </mat-option>
</mat-select>

演示