Angular如何为数组内每张图片添加checkbox并实现仅单选功能

问题原因 #

• 你当前所有checkbox使用了固定的id="checkbox"，且没有绑定选中状态与对应图片的关联，才会出现选中一个全选所有的问题。
• 你要实现的单选功能不需要强制使用FormArray，对初学者来说用基础的变量绑定方案更简单易维护。

最简实现方案 #

第一步：给组件类添加变量和方法 #

在你的.ts组件文件中添加如下代码：

// 存储当前选中的图片索引，默认未选中任何
selectedImageIndex: number | null = null;

// 切换选中状态的方法
onCheckChange(index: number): void {
  this.selectedImageIndex = this.selectedImageIndex === index ? null : index;
}

第二步：修改模板代码 #

调整你的HTML模板里的checkbox部分，同时修复原代码中img id重复的问题：

<div *ngFor="let image of result; let i=index" class="upload-files">
  <div>
    <input 
      type="checkbox" 
      id="checkbox-{{i}}" 
      [checked]="selectedImageIndex === i"
      (change)="onCheckChange(i)"
    >
  </div>
  <img 
    id="blah-{{i}}" 
    *ngIf="!isPdf(image.Location)" 
    [src]="image.Location"
    (click)="getURL(image.Location)" 
  />
  <span class="preview" (click)="delete(i)">delete</span>
</div>

这个方案的逻辑是全局只存一个当前选中的索引，同一时间只会有一个checkbox匹配上selectedImageIndex === i的条件，自然实现互斥单选的效果。

关于FormArray的说明 #

只有当你后续有如下需求时，才需要引入FormArray实现：

• 选中状态需要和表单其他字段整合，一起做提交或者表单校验
• 需要批量操作选中状态、或者需要用Angular表单的内置能力管理状态
  普通的单选场景下，上面的变量绑定方案已经完全满足需求，不需要额外引入表单相关的复杂度。

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