如何为数组中的每个图像添加复选框并只选择一个

Question

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

我想为这个数组的每个图像添加复选框，复选框应该一次选中一个。试图添加，但所有被选中在一起。我应该在这里使用formarray吗?附言:我是angular的新手。

Answer 1

您可以使用具有相同名称的单选按钮，这样当您选择一个时，其他按钮将取消选择。

<input type="radio" name="something">

这是一个工作演示https://stackblitz.com/edit/angular-ivy-avqyzs?file=src%2Fapp%2Fapp.component.html

Answer 2

如果你只想选择一个项目，那么你应该使用单选按钮而不是复选框。

给单选按钮赋值，使用(change)获取值事件。

Answer 3

根据你发布的内容，我猜你也在使用响应式表单，因为你已经知道FormArray了，所以在下面的代码中我只是添加了Form元素。

您需要将复选框更改为radio，以便您只选择一个选项。在下面的代码中，我假设你想要的单选按钮的值是图像位置，但你可以把它改成你想要的属性。你还需要为你的单选按钮分配一个formControlName来获得选择的值。

<form [formGroup]="form">
<div *ngFor="let image of result; let i=index" class="upload-files">
<div class="">
<input type="radio" formControlName="image" [value]="image.Location">
</div>
<img id="blah" [src]="image.Location"
(click)="getURL(image.Location)" />
<span class="preview" (click)="delete(i)">delete</span>
</div>
</form>