Angular中如何实现*ngFor循环复选框仅保留最后选中项？

你已经找对了核心思路，但问题出在原生checkbox的默认行为和Angular绑定的状态冲突了，咱们一步步来修复：

问题根源 #

你点击<label>时，因为for属性关联了对应的checkbox，浏览器会自动触发checkbox的选中/取消状态，这会直接覆盖你通过[checked]="i == selectedElement"设置的组件变量状态，导致看起来没有选中效果。

解决方案 #

我们需要阻止label点击的默认行为，让checkbox的状态完全由组件变量控制，具体步骤如下：

1. 在组件类中添加选中索引变量 #

在你的组件.ts文件里定义一个变量，用来跟踪当前选中的项索引：

selectedIndex: number = -1; // 初始值设为-1，表示没有任何项被选中

2. 修改点击事件方法，添加默认行为阻止 #

更新selectItem方法，接收当前索引和事件对象，阻止默认行为并设置选中索引：

selectItem(item: any, index: number, event: Event) {
  // 阻止label点击时触发checkbox的原生选中行为
  event.preventDefault();
  this.selectedIndex = index;
  // 这里可以保留你原本处理item的逻辑，比如保存选中的item等
}

3. 更新模板代码 #

调整模板中的checkbox绑定和点击事件，确保状态完全由selectedIndex控制：

<div class="item-wrapper" *ngIf="showItems">
  <div class="wrap-collapsible" *ngFor="let item of items; let i = index">
    <!-- 用selectedIndex控制checkbox的选中状态 -->
    <input id="{{i}}" class="toggle" type="checkbox" [checked]="i === selectedIndex">
    <!-- 传递索引和事件对象给selectItem方法 -->
    <label for="{{i}}" class="dropdown-toggle" tabindex="0" (click)="selectItem(item, i, $event)"> 
      Threat {{item.id}}: {{item.category}} 
    </label>
    <!-- 可选：让选中项的内容区域自动展开 -->
    <div class="collapsible-content" [class.active]="i === selectedIndex">
      <div class="content-wrapper">
        <p class="title">{{item.title}}</p>
      </div>
    </div>
  </div>
</div>

额外优化（可选） #

如果你希望点击已经选中的项可以取消选中，可以在selectItem方法里加个判断：

selectItem(item: any, index: number, event: Event) {
  event.preventDefault();
  // 如果点击的是已选中的项，取消选中；否则设置为当前项
  this.selectedIndex = this.selectedIndex === index ? -1 : index;
}

这样就能完美实现你想要的效果：点击某一项时取消其他所有项的选中状态，仅保留当前点击的项。

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