如何在mat-select中隐藏已选中的mat-option（动态表格场景）

核心思路 #

通过维护全局的已选中值数组，实时过滤下拉选项，确保每个选项仅能被选中一次（当前行自身的选中值除外，避免编辑时看不到自己选的项）。

具体实现步骤 #

1. 维护已选中值数组
   在组件类中声明数组，存储所有行已选中的下拉选项：

selectedOptions: string[] = [];

2. 实时同步选中值
   监听表单数组的变化，自动更新已选中值数组，保证数据准确性：

ngOnInit() {
  // 假设你的动态行表单数组为 this.formArray
  this.formArray.valueChanges.subscribe(formValues => {
    this.selectedOptions = formValues
      .map(row => row.option) // 提取每行的下拉选中值
      .filter(val => !!val);  // 过滤未选择的空值
  });

  // 若有初始数据，初始化时同步已选中值
  this.selectedOptions = this.initialData
    .map(item => item.option)
    .filter(val => !!val);
}

3. 模板中过滤下拉选项
   在mat-option上添加*ngIf条件，隐藏被其他行选中的选项，但保留当前行自身的选中值：

<mat-select formControlName="option" placeholder="选择选项">
  <mat-option 
    *ngFor="let option of options" 
    [value]="option"
    *ngIf="!selectedOptions.includes(option) || option === row.get('option').value">
    {{ option }}
  </mat-option>
</mat-select>

这里的row是当前行的表单组，options为你的静态下拉选项数组。

4. 处理行删除场景
   若有删除行功能，删除后formArray.valueChanges会自动触发更新selectedOptions；如果是手动处理删除逻辑，记得同步移除对应的值。

关键注意点 #

• 必须保留当前行的选中值，否则编辑当前行时会看不到自己之前选择的选项。
• 过滤时要排除空值，避免未选择的行干扰选中值数组。

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