如何在mat-select选中项旁添加可点击按钮？

AI 小北

2026-6-17

解决Mat-Select选中项旁添加可点击按钮的问题

要实现仅在选中项旁显示可点击按钮，下拉列表中不显示的需求，核心是利用mat-select-trigger自定义选中项的展示内容，同时让下拉选项只保留文本。你的原代码问题在于把按钮放在了mat-option内部，导致下拉列表也会显示按钮，且Mat-Select默认不会在选中框渲染交互按钮元素。

具体实现方案

用<mat-select-trigger>接管选中项的显示逻辑，在这里添加按钮
下拉列表的<mat-option>仅展示选项文本，移除按钮
通过表单控件的值判断是否显示按钮（选中有效选项时才显示）
绑定按钮点击事件，根据选中值获取对应链接并在新标签页打开

完整代码示例

<mat-select [formControl]="formControl">
  <!-- 自定义选中项的显示模板 -->
  <mat-select-trigger>
    {{ getSelectedLabel() }}
    <!-- 仅当选中有效选项时显示按钮 -->
    @if (formControl.value) {
      <button 
        (click)="openLink()"
        style="margin-left: 8px; padding: 2px 6px;"
      >
        Open
      </button>
    }
  </mat-select-trigger>

  <mat-option></mat-option>
  @for (option of options; track option) {
    <mat-option [value]="option.value">
      {{ option.key }}
      <!-- 下拉选项中不再包含按钮 -->
    </mat-option>
  }
</mat-select>

// 组件内辅助方法与事件处理
getSelectedLabel(): string {
  const selected = this.options.find(opt => opt.value === this.formControl.value);
  return selected ? selected.key : '';
}

openLink(): void {
  const selected = this.options.find(opt => opt.value === this.formControl.value);
  if (selected?.url) {
    window.open(selected.url, '_blank');
  }
}