Angular 2: Ziel Checkbox auf div Klick

Question

Wenn Benutzer klickt auf div (Klasse = Einheit) Ich möchte Kontrollkästchen anzielen und markieren Sie es als aktiviert/deaktiviert. Wenden Sie auch Klasseneinheit an - ausgewählt, wenn das Kontrollkästchen aktiviert ist und die Option zum Entfernen der Klasseneinheit entfernen, wenn das Kontrollkästchen deaktiviert ist.

Ich versuchte, ähnliche Fragen zu stellen, aber nichts funktionierte für mich. kann mir jemand helfen selectUnit ($ event)

<div class="unit" (click)="selectUnit($event)" [ngClass]="{'unit-selected'}"> 
 
     <input type="checkbox" name="unit" /> 
 
     <div class="unit-number">abc</div> 
 
     <div class="unit-desc">Description</div> 
 
     </div> 
 
     
 
<div class="unit" (click)="selectUnit($event)" [ngClass]="{'unit-selected'}"> 
 
     <input type="checkbox" name="unit" /> 
 
     <div class="unit-number">xyz</div> 
 
     <div class="unit-desc">Description</div> 
 
     </div> 
 
     
 
<div class="unit" (click)="selectUnit($event)" [ngClass]="{'unit-selected'}"> 
 
     <input type="checkbox" name="unit" /> 
 
     <div class="unit-number">mno</div> 
 
     <div class="unit-desc">Description</div> 
 
     </div>

Answer 1

Obwohl @Nehal 's Antwort perfekt gültig und wird funktionieren, wenn es nur begrenzte sind' units‘, es wird nicht gut skalieren, weil Sie die switch-Anweisung jedes Mal bearbeiten müssen, was gegen die open/closed principle of SOLID verstößt.

Wenn Sie wahrscheinlich mehrere, unbekannte Mengen von 'units' verwenden. Betrachten reactive forms wie so mit (Plunker here):

@Component({ 
    selector: 'my-app', 
    template: ` 
    <form [formGroup]="form"> 
    <div formArrayName="unitArr"> 
     <div 
     *ngFor="let unit of units; let i = index" 
     class="unit" 
     (click)="onClick(i)" 
     [ngClass]="{'unit-selected': unitArr.controls[i].value}"> 
      <input type="checkbox" formControlName="{{i}}"/> 
      <div class="unit-number">{{ unit.num }}</div> 
      <div class="unit-desc">{{ unit.desc }}</div> 
     </div> 
    </div> 
    </form> 
    `, 
    styles: [`.unit-selected { color: red; }`] 
}) 
export class App implements OnInit{ 
    private units = [ 
    {num: 1, desc: 'Decription'}, 
    {num: 2, desc: 'Decription'}, 
    {num: 3, desc: 'Decription'}, 
    ] 
    private form: Form 

    constructor (private fb: FormBuilder) {} 

    ngOnInit() { 
    this.form = this.fb.group({ 
     unitArr: this.fb.array(
     this.units.map((unit) => { 
      return this.fb.control(false) // Set all initial values to false 
     }) 
    ) 
    }); 
    } 

    // Shorten for the template 
    get unitArr(): FormArray { 
    return this.form.get('unitArr') as FormArray; 
    }; 

    onClick(i) { 
    const control = this.unitArr.controls[i] 
    control.setValue(!control.value) // Toggle checked 
    } 
} 

Answer 2

Sie einfach etwas tun können, zu vervollständigen, wie jedes divs Checkbox einen Namen geben und die Variable Verweis auf eine Funktion ausgelöst durch click Ereignis passieren, wobei Sorge für den Toggle (da Sie durch Klicken auf das Div, und nicht nur das Kontrollkästchen selbst schalten möchten). Sie können den Variablennamen verwenden, um die Bedingung zu steuern und sie an ngModel zu binden, um die Häkchenansicht zu bearbeiten.

Beispiel html:

<div class="unit" 
    (click)="toggleCheckbox('unitABC')" 
    [ngClass]="{ 'unit-selected' : unitABC == true }"> 
    <input type="checkbox" name="unit" [(ngModel)]="unitABC"> 
    <div class="unit-number" >abc</div> 
    <div class="unit-desc">Description</div> 
</div> 

component.ts:

unitABC = false; 
unitXYZ = false; 
unitMNO = false; 

toggleCheckbox(currCheckbox){ 
    console.log(currCheckbox); 
    switch(currCheckbox){ 
    case 'unitABC' : 
     this.unitABC = !this.unitABC; 
     break; 
    case 'unitXYZ' : 
     this.unitXYZ = !this.unitXYZ; 
     break; 
    case 'unitMNO' : 
     this.unitMNO = !this.unitMNO; 
     break; 
    } 
} 

Full demo