如何让Mat-select背景色与选中的Mat-option背景色保持一致？

方案1：通过FormControl的值直接匹配选项颜色 #

不需要额外维护选中状态变量，直接依托表单控件的当前值，从选项列表中定位对应项的颜色，绑定到mat-select的ngStyle上：

<mat-form-field>
  <mat-select 
    [formControlName]="name"
    [ngStyle]="{backgroundColor: getSelectedColor()}"
  >
    <mat-option
      [value]="option.id"
      [ngStyle]="{backgroundColor: option.color}"
      *ngFor="let option of list; let i = index"
    >
      {{option.title}}
    </mat-option>
  </mat-select>
</mat-form-field>

组件类中添加对应方法：

getSelectedColor(): string {
  const selectedId = this.formGroup.get(this.name)?.value;
  const selectedOption = this.list.find(opt => opt.id === selectedId);
  return selectedOption?.color || 'transparent'; // 未选中时用透明作为默认值
}

这种方式完全依赖表单控件的值，后续抽离独立组件时，只需将formControl、list作为输入参数即可，复用性强，也不用额外跟踪选中状态。

方案2：利用MatSelect的selectionChange事件实时更新 #

如果担心频繁遍历数组影响性能，可以通过选择事件直接获取完整的选中选项对象，存储后绑定样式：

<mat-form-field>
  <mat-select 
    [formControlName]="name"
    [ngStyle]="{backgroundColor: selectedOption?.color}"
    (selectionChange)="onSelectChange($event)"
  >
    <mat-option
      [value]="option.id"
      [ngStyle]="{backgroundColor: option.color}"
      *ngFor="let option of list; let i = index"
      [data]="option" <!-- 将完整选项对象存入data属性 -->
    >
      {{option.title}}
    </mat-option>
  </mat-select>
</mat-form-field>

组件类逻辑：

selectedOption: any;

onSelectChange(event: MatSelectChange) {
  // 通过选中项的viewValue拿到完整选项对象
  this.selectedOption = event.source.selected.viewValue;
}

这种方式在选择触发时直接获取目标选项，避免了重复遍历数组，适合选项列表规模较大的场景。

额外提示 #

• 初始加载时如果有默认选中项，记得在ngOnInit中手动触发一次颜色匹配逻辑，避免初始状态背景色为空。
• 后续抽离组件时，建议把formControl、optionsList设为@Input()参数，将样式逻辑封装在组件内部，对外只暴露必要的输入输出，保证组件的内聚性。

内容的提问来源于stack exchange，提问作者Rhett Harrison