Angular2, in mehreren Checkboxen Liste erhalten den Wert der Checkbox

Question

Ich benutze mehrere Kontrollkästchen und beim Klicken auf eine der Checkbox müssen Sie den Wert im Array drücken, wenn es aktiviert ist und entfernen Sie aus dem Array, wenn aktiviert falsch.

Gibt es eine Möglichkeit zu überprüfen, ob das Kontrollkästchen aktiviert oder deaktiviert ist, wie bei jquery?

Answer 1

Weiter im Kommentar:

HTML Element:

<input type="checkbox" (click)="onClick($event)" /> 

Typoskript Code:

onClick(event: any) { 
console.log(event); //you can explore the event object and use the values as per requirement 
} 

Answer 2

prüfen diese ähnliche Position, die das Problem für mehrere Kontrollkästchen löst. angular-2-get-values-of-multiple-checked-checkboxes

Ich habe

import {Component, NgModule } from '@angular/core'; 
 

 
@Component({ 
 
    selector: 'test-app', 
 
    template: ` 
 
    <label for="options">Options :</label> 
 
    <div *ngFor="let cbItem of cbArr"> 
 
     <label> 
 
     <input type="checkbox" 
 
       name="options" 
 
       value="{{cbItem}}" 
 
       [checked]="cbChecked.indexOf(cbItem) >= 0" 
 
       (change)="updateCheckedOptions(cbItem, $event)"/> 
 
     {{cbItem}} 
 
     </label> 
 
    </div> 
 
    <button (click)="updateOptions()">Post</button> 
 
    ` 
 
}) 
 
export class TestComponent{ 
 
    cbArr: string[]; 
 
    cbChecked: string[]; 
 
    constructor() { 
 
    this.cbArr = ['OptionA', 'OptionB', 'OptionC']; 
 
    this.cbChecked = ['OptionB']; 
 
    } 
 
    
 
    updateCheckedOptions(chBox, event) { 
 
     var cbIdx = this.cbChecked.indexOf(chBox); 
 
     if(event.target.checked) { 
 
      if(cbIdx < 0) 
 
      this.cbChecked.push(chBox); 
 
     } else { 
 
      if(cbIdx >= 0) 
 
      this.cbChecked.splice(cbIdx,1); 
 
     } 
 
    } 
 
    
 
    updateOptions() { 
 
    console.log(this.cbChecked); 
 
    } 
 
    
 
}

in angular2 hier eine einfache Implementierung für Checkbox Staaten enthalten

Hier cbArr speichert die Werte oder Optionen benötigt und cbChecked speichert die ausgewählten Werte. Wenn Sie den Wert des Kontrollkästchens ändern, wird cbChecked aktualisiert. Das Kontrollkästchen wird aktualisiert und schließlich können Sie beim Klicken auf die Schaltfläche "Post" die cbChecked-Werte für die Liste der ausgewählten Elemente einfach ausdrucken.