如何使用 angular 材料下拉菜单制作选定的颜色或字体？

Question

我想做一个下拉菜单，以便能够使用 angular 材料更改背景和字体的颜色。 最好的方法是什么？

在下拉列表中会有几个 colors 并且当你选择一种颜色时背景会发生变化，我在被阻止后做了一个代码的开头

我也想用下拉菜单更改字体

谢谢你。

html

<h1>Change Color</h1>

<div class="center">
    <mat-form-field>
        <mat-label>Neutre</mat-label>
        <mat-select>
            <mat-option *ngFor="let color of colors">{{color.name}}</mat-option>
        </mat-select>
    </mat-form-field>
</div>

ts.文件

 selectedColor = '';

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

Answer 1

<mat-form-field>
  <mat-label>Neutre</mat-label>
  <mat-select [(ngModel)]="selectedColor">
    <mat-option *ngFor="let color of colors" [value]="color.value">{{color.name}}</mat-option>
  </mat-select>
</mat-form-field>

<div [style.background-color]="selectedColor">...</div>