角2，* ng對於復選框僅選中一個

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

然后，對於要表示可選擇的UI元素的每個對象，可以實現ISelectable。

例如：

export class SelectableImg implements ISelectable....

然后，您可以在模板內部使用img.selected控制[checked]綁定。

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