So überprüfen Sie, ob meine Checkbox-Liste aktiviert oder deaktiviert ist AngularJS 2

Question

Ich habe eine Checkbox-Liste.

documentType: IDocument[] = [ 
    { 
     "type": "A", 
     "checked": false, 
    }, 
    { 
     "type":"B", 
     "checked": false, 
    }, 
    { 
     "type":"C" , 
     "checked": false, 
    }]; 

ich tragen dieses Array in einer Liste von Kontrollkästchen auf der Vorlage:

<ion-list *ngFor="let type of documentType"> 
    <ion-item > 
    <ion-label>{{type.documentTypeName}}</ion-label> 
     <ion-checkbox [(ngModel)]="type.checked"   (click)="checkBoxChecked(type.documentTypeName)" disabled="false" ></ion-checkbox> 
    </ion-item> 
</ion-list> 

zurück auf die Komponente i die checkBoxChecked Methode erstellt:

checkBoxChecked(documentTypeinput) 
    { 
    if (documentTypeinput =="A") 
    { 
     console.log("this A"); 
    } 
    else if (documentTypeinput=="B"){ 
     console.log("B") 
    } 
    else if (documentTypeinput=="C"){ 
     console.log("C") 
    } 
    } 

Aber dies ist nicht der richtige Weg. Ich kann nicht wissen, welches Element aktiviert oder deaktiviert ist. Können Sie mir helfen, die beste Vorgehensweise zu finden, um mit mehreren Checkboxen zu arbeiten? weil ich das Array mit Diensten einstellen möchte. und ich möchte meinen Code wiederverwendbar. also werde ich nur die web api ändern. Vielen Dank im Voraus

Answer 1

Da Sie Ihr Kontrollkästchen an Ihre Objekte mit [(ngModel)]="type.checked" binden, haben Sie bereits alle Daten, die Sie benötigen. Sie müssen nur Ihr Array durchlaufen, um zu überprüfen, welches Kontrollkästchen aktiviert ist.

checkBoxChecked() 
{ 
    this.documentType.forEach(e => { 
     if(e.checked){ 
      console.log(e.type+' is checked !") 
     } 
    }); 
} 

Answer 2

<li *ngFor="let col of data" class="form-group"> 
    <input type="checkbox" name="col" value=" {{col.value}}" [(ngModel)]="col.value" (change)="addColumns(col)" />{{col.name}} 
</li> 

data:any[]=[{"id":"13","name":"AAA"},{"id":"15","name":"BBB"}, {"id":"20","name":"CCC"}] 
constructor() {} 
get selectedcheckboxes() { 
    return this.data 
     .filter(opt => opt.value) 
} 

addColumns(col){ 
    this.selectedcheckboxes; 
    console.log(this.selectedcheckboxes) 
} 


See The demo below using the property binding-ngModel : 

DEMO