Angular循环内复选框最多选2个：第三个复选框无法自动取消选中求助

你的问题核心是：当选中第三个复选框时，只触发了提示，但没有主动把这个复选框的选中状态置为false，所以它会保持选中状态。另外你的HTML代码里还有语法错误，先一起修正。

第一步：修复HTML的语法错误 #

原HTML里的input标签属性写混了，value和(change)事件的位置不对，修正后：

<tr *ngFor="let row of rows$; let indexOfEl = index">
    <td><input type="checkbox" [value]="indexOfEl" (change)="onCheckboxChange($event, indexOfEl, row)"/></td>
</tr>

第二步：修改TS代码，添加取消复选框选中的逻辑 #

在onCheckboxChange方法的else分支里，加上event.target.checked = false;，强制取消当前复选框的选中状态：

onCheckboxChange(event: any, index: any, data: any) {
  if (event?.target?.checked) {
    if (this.selectedCommand.length < 2) {
      data.index = index;
      this.selectedCommand.push(data);
    } else {
      // 取消当前复选框的选中状态
      event.target.checked = false;
      this.sharedService.showErrorNotification('Cannot select more than two commands', 'Error');
    }
  } else {
    this.selectedCommand = this.arrayRemove(this.selectedCommand, index);
  }
}

arrayRemove(array: any, index: any) {
  return array.filter(function(element) {
    return element.index != index;
  });
}

说明 #

• 修正HTML的语法错误是为了确保事件绑定和value属性正常工作，避免因为语法问题导致事件不触发或参数错误。
• 添加event.target.checked = false;后，当用户选中第三个复选框时，代码会先判断选中数量已达上限，然后直接把当前复选框的选中状态设为未选中，同时弹出提示，这样就实现了自动取消的效果。

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