각도 2, * ngFor 확인란을 하나만 선택하십시오

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 바인딩 [확인].

private updateSelection(selectedOption){ 

let selected = selectedOption.selected; 

this.deselectAll(this.allVals); 

selectedOption.selected = !selected; 
}