eckig 2, * ngFür das Kontrollkästchen nur eine prüfen

Question

Ich versuche eine dynamische Liste mit Kontrollkästchen unter Verwendung *ngFor zu erstellen. Hier möchte ich, dass das Kontrollkästchen nur einzeln aktiviert werden kann (wenn der Benutzer das zweite Kontrollkästchen anklickt, das zuvor ausgewählt wurde, sollte es deaktiviert werden).

<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

Es wäre effizienter, eine benutzerdefinierte ISelectable-Schnittstelle zu implementieren, so etwas.

Dann können Sie für jedes Objekt, das Sie als auswählbares UI-Element darstellen möchten, ISelectable implementieren.

zB:

export class SelectableImg implements ISelectable.... 

in Ihrer Vorlage Dann können Sie die Kontrolle [geprüft] mit img.selected verbindlich.

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

eine DeselectAll Methode erstellen:

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

Und Ihre Event-Handler

private updateSelection(selectedOption){ 

let selected = selectedOption.selected; 

this.deselectAll(this.allVals); 

selectedOption.selected = !selected; 
}