如何在Angular Material中基于下拉选择动态修改按钮背景色

完全可以通过下拉选中事件联动修改FAB按钮背景色，核心思路是将下拉选中值与FAB按钮的样式属性做绑定，具体实现步骤如下：

1. 组件类逻辑（.ts文件） #

先定义下拉选项、选中值存储变量，以及选项值到颜色的映射关系：

import { Component } from '@angular/core';
import { MatSelectModule } from '@angular/material/select';
import { MatButtonModule } from '@angular/material/button';
import { FormsModule } from '@angular/forms';

// 下拉选项数据结构
interface SelectOption {
  value: string;
  label: string;
  targetBtnId: string; // 对应要修改的FAB按钮ID
  color: string; // 对应要设置的背景色
}

@Component({
  selector: 'app-your-component',
  standalone: true,
  imports: [MatSelectModule, MatButtonModule, FormsModule],
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  // 下拉选项列表，可按业务需求调整
  selectOptions: SelectOption[] = [
    { value: 'status1', label: '状态1', targetBtnId: 'btn1', color: '#2ecc71' },
    { value: 'status2', label: '状态2', targetBtnId: 'btn2', color: '#f39c12' },
    { value: 'status3', label: '状态3', targetBtnId: 'btn3', color: '#e74c3c' }
  ];

  // 存储当前选中的下拉项
  selectedOption?: SelectOption;
}

2. 模板实现（.html文件） #

下拉组件绑定选中值，FAB按钮直接绑定样式属性到当前选中值的对应配置即可：

<!-- 下拉选择组件 -->
<mat-select [(ngModel)]="selectedOption" placeholder="选择状态">
  <mat-option *ngFor="let option of selectOptions" [value]="option">
    {{option.label}}
  </mat-option>
</mat-select>

<!-- FAB按钮组 -->
<button mat-fab 
  id="btn1" 
  [style.backgroundColor]="selectedOption?.targetBtnId === 'btn1' ? selectedOption.color : ''">
  B1
</button>

<button mat-fab 
  id="btn2" 
  [style.backgroundColor]="selectedOption?.targetBtnId === 'btn2' ? selectedOption.color : ''">
  B2
</button>

<button mat-fab 
  id="btn3" 
  [style.backgroundColor]="selectedOption?.targetBtnId === 'btn3' ? selectedOption.color : ''">
  B3
</button>

可选优化：适配Material主题色 #

如果需要使用Angular Material预设的主题色（primary/accent/warn），可以改用类绑定的方式：

1. 先在样式文件中定义对应类：

.btn-primary {
  background-color: var(--mat-primary);
  color: white;
}
.btn-accent {
  background-color: var(--mat-accent);
  color: white;
}
.btn-warn {
  background-color: var(--mat-warn);
  color: white;
}

2. 修改SelectOption结构增加themeClass字段，模板中用[ngClass]绑定即可：

<button mat-fab 
  [ngClass]="selectedOption?.targetBtnId === 'btn1' ? selectedOption.themeClass : ''">
  B1
</button>

内容的提问来源于stack exchange，提问作者Jin Ma