如何在Angular的<select>下拉框中添加多个切换按钮作为选项？

首先明确：原生HTML的<select>和<option>标签不支持内嵌复选框这类表单元素，浏览器会自动忽略<option>内的<input>标签，所以你之前的写法无效。下面是两种可行的Angular实现方案：

方案一：使用Angular Material组件（推荐） #

Angular Material的mat-select组件支持自定义选项内容，能轻松实现这类需求，且自带成熟的交互和样式。

步骤1：安装Angular Material（未安装时执行） #

ng add @angular/material

步骤2：组件代码实现 #

模板文件：

<mat-form-field appearance="fill">
  <mat-label>选择样本</mat-label>
  <mat-select [formControl]="sampleControl" multiple>
    <mat-option *ngFor="let sample of samples" [value]="sample.value">
      <mat-checkbox 
        [checked]="sampleControl.value.includes(sample.value)" 
        (change)="onCheckboxToggle(sample.value)">
        {{sample.label}}
      </mat-checkbox>
    </mat-option>
  </mat-select>
</mat-form-field>

组件类文件：

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-sample-select',
  templateUrl: './sample-select.component.html',
  styleUrls: ['./sample-select.component.scss']
})
export class SampleSelectComponent {
  sampleControl = new FormControl([]);
  samples = [
    { value: 'sample1', label: '样本1' },
    { value: 'sample2', label: '样本2' },
    { value: 'sample3', label: '样本3' }
  ];

  onCheckboxToggle(value: string) {
    const currentValues = this.sampleControl.value || [];
    const valueIndex = currentValues.indexOf(value);

    if (valueIndex >= 0) {
      currentValues.splice(valueIndex, 1);
    } else {
      currentValues.push(value);
    }

    this.sampleControl.setValue(currentValues);
  }
}

方案二：自定义下拉组件（无第三方库） #

如果不想引入第三方库，可以手动构建自定义组件，完全控制样式和逻辑：

模板文件 #

<div class="custom-select-wrapper">
  <button class="select-trigger" (click)="isDropdownOpen = !isDropdownOpen">
    {{selectedSamples.length > 0 ? selectedSamples.join(', ') : '选择样本'}}
    <span class="dropdown-arrow">{{isDropdownOpen ? '▲' : '▼'}}</span>
  </button>
  <div class="dropdown-panel" *ngIf="isDropdownOpen">
    <div *ngFor="let sample of samples" class="dropdown-item">
      <input 
        type="checkbox" 
        [checked]="selectedSamples.includes(sample.value)"
        (change)="toggleSampleSelection(sample.value)">
      <span>{{sample.label}}</span>
    </div>
  </div>
</div>

组件类文件 #

import { Component, HostListener } from '@angular/core';

@Component({
  selector: 'app-custom-select',
  templateUrl: './custom-select.component.html',
  styleUrls: ['./custom-select.component.scss']
})
export class CustomSelectComponent {
  isDropdownOpen = false;
  selectedSamples: string[] = [];
  samples = [
    { value: 'sample1', label: '样本1' },
    { value: 'sample2', label: '样本2' },
    { value: 'sample3', label: '样本3' }
  ];

  toggleSampleSelection(value: string) {
    const valueIndex = this.selectedSamples.indexOf(value);
    if (valueIndex >= 0) {
      this.selectedSamples.splice(valueIndex, 1);
    } else {
      this.selectedSamples.push(value);
    }
  }

  // 点击外部关闭下拉框
  @HostListener('document:click', ['$event'])
  handleClickOutside(event: Event) {
    const target = event.target as HTMLElement;
    if (!target.closest('.custom-select-wrapper')) {
      this.isDropdownOpen = false;
    }
  }
}

配套SCSS样式 #

.custom-select-wrapper {
  position: relative;
  width: 220px;
}

.select-trigger {
  width: 100%;
  padding: 8px 14px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
}

.dropdown-panel {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  border: 1px solid #e0e0e0;
  border-radius: 0 0 4px 4px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  z-index: 100;
}

.dropdown-item {
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;

  &:hover {
    background-color: #f5f5f5;
  }
}

内容的提问来源于stack exchange，提问作者Kalana Tebel