Angular Material下拉框如何禁止已保存的选项被重复选择？

问题根因 #

你遇到的问题是两处逻辑错误共同导致的：

1. 模态框初始化逻辑问题：每次打开模态框时，localiseFoodName方法中转换localisedEntities的逻辑强制将所有非英文语言的canEdit属性设为true，直接覆盖了之前保存的canEdit: false状态，这是再次打开对话框后已保存语言仍可选择的核心原因。
2. 状态同步逻辑问题：onChangeValue方法中只修改了languages数组里的canEdit标识，没有同步修改当前选中行rows对应条目的canEdit，所以会出现languages里标识已禁用，但rows里对应值没有变化的日志差异。

修复方案 #

1. 修正模态框初始化逻辑 #

修改localiseFoodName里的转换逻辑，不要强制覆盖非英文语言的canEdit值，保留之前保存的禁用状态：

localiseFoodName() {
    const dialogData = < DialogDataModel > {
      localisedEntities: this.foodModel.localisedName.map((item: any) => {
        // 仅英文强制禁用，其他语言保留原本的canEdit状态
        if (item.code == 'en') {
          item.canEdit = false;
        }
        // 移除原有的else赋值true逻辑，保留原有状态
        return item;
      }),
    };

    let dialogRef = this.dialog.open(ModalAllComponent, { width: '26.5rem', data: dialogData });

    dialogRef.afterClosed().subscribe(res => {
      if (res && res.data) {
        this.foodModel.localisedName.map((item:any)=>{
          const temp = res.data.find((element:any)=> element.code === item.code);
          if(temp){
            item.value = temp.value
            item.canEdit = false
          }
        })
      }
    })
  }

2. 修正选择语言时的状态同步逻辑 #

修改onChangeValue方法，选中语言后同步把当前行的canEdit设为false：

onChangeValue(ev: any){
  this.rows = this.rows.map(row => {
    if (row.code == ev.value) {
      const lang = this.languages.find(lang => lang.code == ev.value);
      row.title = lang.title;
      // 新增：同步设置当前行的canEdit为false
      row.canEdit = false;
    }
    return row;
  })

  this.languages = this.languages.map(lang => {
    if (lang.code == ev.value) {
      lang.canEdit = false;
    }
    return lang;
  });
  this.isDisabled()
}

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