Winkel 4 Werte aus Checkboxen

Ich bin neu in eckig und komme nicht weiter an dieser ziemlich einfachen problem. Ich bekomme Daten aus einem webservice zu zeigen, ein paar Checkboxen. Ich brauche einen Weg, um den Wert aller Checkboxen durch den Benutzer ausgewählt. Ich bin mit material Design.

<span *ngFor="let x of maintainanceTypeList">
    <md-checkbox 
       name="{{x.maintenancetype}}" 
       value="{{x.maintenancetype}}"  
       [formControl]="CreateSocietyForm.controls['checkMaintainanceType']">
         {{x.maintenancetype}}
    </md-checkbox>
</span>

InformationsquelleAutor Ninad Gaikwad | 2017-07-08

  1. 8

    Können Sie ein change event zu md-checkbox und übergeben Sie das Objekt an eine Funktion. Pflegen Sie ein array nachzuverfolgen, welche bekam checked und unchecked - und update-array, dass nach.

    html:

    <span *ngFor="let x of maintainanceTypeList">
    <md-checkbox 
       name="{{x.maintenancetype}}" 
       value="{{x.maintenancetype}}"
       (change)="change($event, x)">
         {{x.maintenancetype}}
    </md-checkbox>
</span>

<p> Selected value: {{selectedValue | json}} </p>

    Komponente.ts:

    export class SelectFormExample {
  selectedValue = [];

  maintainanceTypeList = [
    {maintenancetype: 'Steak'},
    {maintenancetype: 'Pizza'},
    {maintenancetype: 'Tacos'}
  ];

  change(e, type){
    console.log(e.checked);
    console.log(type);
    if(e.checked){
      this.selectedValue.push(type);
    }
    else{
     let updateItem = this.selectedValue.find(this.findIndexToUpdate, type.maintenancetype));

     let index = this.selectedValue.indexOf(updateItem);

     this.selectedValue.splice(index, 1);
    }

  }

  findIndexToUpdate(type) { 
        return type.maintenancetype === this;
    }
}

    Plunker demo

    Danke!!! Ich werde es ausprobieren.
    Es funktioniert perfekt! Dank einer Tonne

    InformationsquelleAutor Nehal

  2. 10

    Statt e.checked können Sie die folgenden verwenden:

    Beispiel arbeiten

    HTML

    <input class="form-check-input" type="checkbox" (change)="selectBadge($event, badge._id)">

    Typoskript

    selectBadge (e, id) {

 if (e.target.checked) {
   this.product.badges.push(id);
 }  else {
   this.product.badges.splice(this.product.badges.indexOf(id), 1);
 }

}
    Ich denke, du bist auf die andere Antwort auf diese Frage. Bitte Bearbeiten Sie die Antwort enthalten ist. In Zukunft überlegen, solche kleinen Ergänzungen als Kommentare zu den anderen Antworten. Bonus: ich denke, Sie haben eine ungültige Annahme. Sie sind mit <input> während die anderen answe ist mit einem <md-checkbox>. Die Veranstaltungen sind für die beiden unterschiedlichen Arten

    InformationsquelleAutor Alex Kumundzhiev

Schreibe einen Kommentar