如何在mat-select v16中隐藏已选中的下拉选项？

针对你使用的Mat-Select v16，要实现选中选项后下拉列表不再显示该选项，只需要过滤掉已选中的项即可，具体操作分两步：

1. 在组件类中添加过滤逻辑 #

在你的组件.ts文件里，先确保表单控件已正确初始化，然后添加一个计算属性来返回过滤后的选项数组：

import { FormGroup, FormBuilder } from '@angular/forms';
// ... 其他必要导入

export class YourComponent {
  form: FormGroup;
  // 假设你的options是类似这样的结构
  options = [
    { value: 'option1', label: '选项1' },
    { value: 'option2', label: '选项2' },
    { value: 'option3', label: '选项3' }
  ];

  constructor(private fb: FormBuilder) {
    // 初始化表单并设置默认选中值为option1
    this.form = this.fb.group({
      value: ['option1']
    });
  }

  // 过滤掉已选中的选项
  get filteredOptions() {
    const selectedVal = this.form.get('value')?.value;
    return this.options.filter(item => item.value !== selectedVal);
  }
}

2. 修改模板中的循环数据源 #

把模板里*ngFor的原始options换成上面定义的filteredOptions，同时移除原来的selected="option1"（因为表单初始值已通过代码设置）：

<mat-form-field>
    <mat-select formControlName="value">
      <mat-option *ngFor="let item of filteredOptions"
         [value]="item.value">{{ item.label }}</mat-option>
    </mat-select>
</mat-form-field>

这样设置后，初始加载时因为默认选中了option1，下拉列表会直接显示option2和option3；后续选中任意选项时，下拉列表都会自动隐藏已选中的项，只展示未选的选项。

内容的提问来源于stack exchange，提问作者Saran S