Angular 14中如何限制Mat Checkbox的选中数量

我尝试给Mat Checkbox设置最多选中2个的限制，但代码运行异常，无法实现需求。现有代码如下：

toggleSelection = (data: ItemData): void => {
     data.selected = !data.selected; 
       if (data.selected === true) { 
           if(this.selectData.length <= 1) {
               this.selectData.push(data);
       } else {
         data.selected = false;
         alert("You can select only 2");
       } 
  }

问题分析 #

原代码只处理了选中时的添加逻辑，完全忽略了取消选中时从selectData中移除对应项的操作，导致selectData的长度只会累加不会减少。一旦选中过2个选项后，哪怕取消其中一个，数组长度还是保持2，后续无法再选择新的选项。

修改后的代码 #

toggleSelection = (data: ItemData): void => {
  // 若当前未选中，且已选数量达上限，直接拦截
  if (!data.selected && this.selectData.length >= 2) {
    alert("You can select only 2");
    return;
  }

  // 切换选中状态
  data.selected = !data.selected;

  if (data.selected) {
    // 选中时加入已选数组
    this.selectData.push(data);
  } else {
    // 取消选中时从已选数组移除
    const targetIndex = this.selectData.findIndex(item => item.id === data.id);
    if (targetIndex !== -1) {
      this.selectData.splice(targetIndex, 1);
    }
  }
};

关键修改点 #

1. 提前拦截超限操作：在修改选中状态前先判断，如果是要选中新选项但已达上限，直接提示并终止操作，避免状态反复修改
2. 补充取消选中的数组更新逻辑：通过findIndex定位要移除的项，用splice从selectData中删除，保证数组长度和实际选中数量一致
3. 调整逻辑顺序：先判断再修改状态，避免原代码中先改状态再判断导致的状态回滚问题

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