角度2、* ngForチェックボックスは1つのみをチェックします

Question

*ngForを使用してチェックボックスで動的リストを作成しようとしています。ここでは、チェックボックスを一度に1つしかチェックできないようにしたいと思います（ユーザが前に選択した2番目のチェックボックスをクリックしてチェックをはずす必要があります）。

<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;} 

選択可能なUI要素を表すすべてのオブジェクトに対して、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方法作成：あなたのupdateSelection方法を投稿できる

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; 
}