угловой 2, * ngFor checkbox проверить только один

Question

Я пытаюсь создать динамический список с флажком с помощью *ngFor. Здесь я хочу, чтобы флажок можно было проверять только по одному (если пользователь щелкнул второй флажок, который был выбран ранее, он должен быть снят).

<div class="img-prev col-md-12" *ngFor="let imgList of uploadedImg; let i = index"> 
    <div class="col-md-1"> 
     <input [ngModel]= "selectImg" (click)="updateSelection(i, imgList)" type="checkbox" /> 
    </div> 
</div> 

Answer 1

Было бы более эффективным реализовать пользовательский интерфейс ISelectable, что-то вроде этого.

export interface ISelectable { 

selected?: boolean;} 

Затем для каждого объекта, который вы хотите представлять выбираемый элемент пользовательского интерфейса, вы можете реализовать ISelectable.

например:

export class SelectableImg implements ISelectable.... 

Затем в шаблоне вы можете контролировать [проверено] связывания с img.selected.

<div class="img-prev col-md-12" *ngFor="let imgList of uploadedImg; let i = index"> 
    <div class="col-md-1"> 
     <input [ngModel]= "selectImg" [checked]="imgList.selected"(click)="updateSelection(i, imgList)" type="checkbox" /> 
    </div> 

Создание метода deselectAll:

private deselectAll(arr: any[]){ 
arr.forEach(val =>{ 
    if(val.selected){ 
     val.selected = false; 
    } 
})} 

И обработчик событий

private updateSelection(selectedOption){ 

let selected = selectedOption.selected; 

this.deselectAll(this.allVals); 

selectedOption.selected = !selected; 
}