Angular中mat-select循环渲染时如何实现选中值自动互斥切换

现有代码存在3个核心问题，会直接导致选中值重复异常：

• *ngFor语法错误：Angular 中遍历列表渲染必须用let item of list语法，写let option in options是JS原生for...in的写法，会遍历对象键而非数组元素，本身就会导致渲染和值绑定异常
• 状态没有拆分：没有把「全局可选值列表」和「每个下拉框独立的选中值」两个状态拆开，所有下拉框没有独立绑定对应选中状态，选值时自然不会做冲突校验
• 缺少值变更冲突处理：当用户选中了和其他下拉框重复的值时，没有逻辑去处理冲突、交换值

1. 组件类（TS）定义状态和处理逻辑 #

首先修正原代码的拼写错误（原代码里的"NAMNE"为笔误，应为"NAME"），拆分可选值池和选中值状态，编写选值变更的冲突处理方法：

import { Component } from '@angular/core';
import { MatSelectChange } from '@angular/material/select';

@Component({
  selector: 'app-select-demo',
  templateUrl: './select-demo.component.html'
})
export class SelectDemoComponent {
  // 全局可选值池，所有下拉框共用这个选项列表
  readonly optionalOptions = ["NAME", "AGE"];
  // 存储每个下拉框的选中值，初始状态按顺序对应第一个选NAME、第二个选AGE
  selectedValues = [...this.optionalOptions];

  handleSelectionChange(currentSelectIndex: number, event: MatSelectChange) {
    const newValue = event.value;
    const oldValue = event.previousValue;

    // 更新当前操作下拉框的选中值
    this.selectedValues[currentSelectIndex] = newValue;

    // 查找是否存在其他下拉框已经选中了当前新选的值
    const conflictSelectIndex = this.selectedValues.findIndex(
      (val, idx) => idx !== currentSelectIndex && val === newValue
    );

    // 存在值冲突时，把冲突下拉框的值替换为当前下拉框修改前的旧值，实现自动交换
    if (conflictSelectIndex !== -1) {
      this.selectedValues[conflictSelectIndex] = oldValue;
    }
  }
}

2. 模板（HTML）修正渲染和绑定逻辑 #

修正*ngFor语法，给每个下拉框绑定对应索引的选中值，监听选值事件，可额外加上重复选项禁用逻辑从交互层面避免冲突：

<ng-container *ngFor="let selected of selectedValues; let i = index">
  <mat-select
    [value]="selectedValues[i]"
    (selectionChange)="handleSelectionChange(i, $event)"
  >
    <mat-option
      *ngFor="let opt of optionalOptions"
      [value]="opt"
      <!-- 可选优化：其他下拉框已经选中的选项直接置灰，用户无法选中重复值 -->
      [disabled]="selectedValues.some((existVal, existIdx) => existIdx !== i && existVal === opt)"
    >
      {{ opt }}
    </mat-option>
  </mat-select>
</ng-container>

• 初始状态：第一个下拉框选中NAME、第二个选中AGE，和需求预期一致
• 修改第一个下拉框值为AGE时，逻辑会自动检测到第二个下拉框已占用AGE，直接把第二个下拉框的值替换为第一个下拉框原来的NAME，最终呈现第一个选AGE、第二个选NAME的效果，无重复选中问题
• 若启用选项禁用逻辑，用户在选值时，其他下拉框已经选中的选项会直接置灰无法点击，从根源避免选到重复值

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