Angular 2: Erhalten Sie Werte von mehreren markierten Checkboxen

Habe ich eine Lösung zu finden, Dank Gunter! Hier ist mein ganzer code falls es jemand helfen könnte:

<div class="form-group">
            <label for="options">Options :</label>
            <div *ngFor="#option of options; #i = index">
                <label>
                    <input type="checkbox"
                           name="options"
                           value="{{option}}"
                           [checked]="options.indexOf(option) >= 0"
                           (change)="updateCheckedOptions(option, $event)"/>
                    {{option}}
                </label>
            </div>
        </div>

Hier sind die 3 Objekte, die ich verwende:

options = ['OptionA', 'OptionB', 'OptionC'];
optionsMap = {
        OptionA: false,
        OptionB: false,
        OptionC: false,
};
optionsChecked = [];

Und es gibt 3 Methoden:

1. Zu initiieren optionsMap:

initOptionsMap() {
    for (var x = 0; x<this.order.options.length; x++) {
        this.optionsMap[this.options[x]] = true;
    }
}

2. zum aktualisieren der optionsMap:

updateCheckedOptions(option, event) {
   this.optionsMap[option] = event.target.checked;
}

3. konvertieren optionsMap in optionsChecked und speichern Sie es in options vor Absenden der POST-Anfrage:

updateOptions() {
    for(var x in this.optionsMap) {
        if(this.optionsMap[x]) {
            this.optionsChecked.push(x);
        }
    }
    this.options = this.optionsChecked;
    this.optionsChecked = [];
}

InformationsquelleAutor der Antwort Yannick Morel

<input type="checkbox" name="options" value="option" (change)="updateChecked(option, $event)" /> 

export class MyComponent {
  checked: boolean[] = [];
  updateChecked(option, event) {
    this.checked[option]=event; //or `event.target.value` not sure what this event looks like
  }
}

InformationsquelleAutor der Antwort Günter Zöchbauer

Ich hoffe, dass dies helfen würde, jemanden, der das selbe problem hat.

templet.html

<form [formGroup] = "myForm" (ngSubmit) = "confirmFlights(myForm.value)">
  <ng-template ngFor [ngForOf]="flightList" let-flight let-i="index" >
     <input type="checkbox" [value]="flight.id" formControlName="flightid"
         (change)="flightids[i]=[$event.target.checked,$event.target.getAttribute('value')]" >
  </ng-template>
</form>

Komponente.ts

flightids array weitere arrays, wie dies
[ [ true, 'id_1'], [ false, 'id_2'], [ true, 'id_3']...]
hier true bedeutet, dass der Benutzer geprüft wird, false bedeutet, dass der Benutzer aktiviert dann deaktiviert.
Die Elemente, die Benutzer noch nie überprüft wird nicht eingefügt werden in das array.

flightids = []; 
confirmFlights(value){  
    //console.log(this.flightids);

    let confirmList = [];
    this.flightids.forEach(id => {
      if(id[0]) //here, true means that user checked the item 
        confirmList.push(this.flightList.find(x => x.id === id[1]));
    });
    //console.log(confirmList);

}

InformationsquelleAutor der Antwort James Sung

Ich hatte das gleiche problem und jetzt habe ich eine Antwort, die ich mehr mag (kann Sie auch). Ich begrenzt haben, jede checkbox ein array-index.

Zuerst habe ich definiert ein Objekt wie dieses:

SelectionStatusOfMutants: any = {};

Dann die Checkboxen wie folgt:

<input *ngFor="let Mutant of Mutants" type="checkbox"
[(ngModel)]="SelectionStatusOfMutants[Mutant.Id]" [value]="Mutant.Id" />

Wie Sie wissen-Objekte in JS werden arrays mit beliebigen Indizes. So das Ergebnis abgerufen, so einfach:

Zählung ausgewählt wie diese:

let count = 0;
    Object.keys(SelectionStatusOfMutants).forEach((item, index) => {
        if (SelectionStatusOfMutants[item])
            count++;
    });

Und ähnlich abrufen ausgewählter solche, wie dieses:

let selecteds = Object.keys(SelectionStatusOfMutants).filter((item, index) => {
        return SelectionStatusOfMutants[item];
    });

Sehen Sie?! Sehr einfach, sehr schön. TG.

InformationsquelleAutor der Antwort ConductedClever