Winkel 2: Werte mehrerer angekreuzter Kontrollkästchen abrufen

Hier ist ein einfacher Weg mit ngModel (final Angular 2)

<!-- my.component.html -->

<div class="form-group">
    <label for="options">Options:</label>
    <div *ngFor="let option of options">
        <label>
            <input type="checkbox"
                   name="options"
                   value="{{option.value}}"
                   [(ngModel)]="option.checked"/>
            {{option.name}}
        </label>
    </div>
</div>

// my.component.ts

@Component({ moduleId:module.id, templateUrl:'my.component.html'})

export class MyComponent {
  options = [
    {name:'OptionA', value:'1', checked:true},
    {name:'OptionB', value:'2', checked:false},
    {name:'OptionC', value:'3', checked:true}
  ]

  get selectedOptions() { // right now: ['1','3']
    return this.options
              .filter(opt => opt.checked)
              .map(opt => opt.value)
  }
}

erstellen Sie eine Liste wie: -

this.xyzlist = [
  {
    id: 1,
    value: 'option1'
  },
  {
    id: 2,
    value: 'option2'
  }
];

Html: -

<div class="checkbox" *ngFor="let list of xyzlist">
            <label>
              <input formControlName="interestSectors" type="checkbox" value="{{list.id}}" (change)="onCheckboxChange(list,$event)">{{list.value}}</label>
          </div>

dann in seiner Komponente ts: -

onCheckboxChange(option, event) {
     if(event.target.checked) {
       this.checkedList.Push(option.id);
     } else {
     for(var i=0 ; i < this.xyzlist.length; i++) {
       if(this.checkedList[i] == option.id) {
         this.checkedList.splice(i,1);
      }
    }
  }
  console.log(this.checkedList);
}

<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
  }
}

Ich habe mich gerade mit diesem Problem konfrontiert und beschlossen, alles so wenig wie möglich zu gestalten, um den Arbeitsbereich sauber zu halten. Hier ist ein Beispiel für meinen Code

<input type="checkbox" (change)="changeModel($event, modelArr, option.value)" [checked]="modelArr.includes(option.value)" />

Die Methode, die bei Änderung aufgerufen wurde, drückt den Wert des Modells oder entfernt ihn.

public changeModel(ev, list, val) {
  if (ev.target.checked) {
    list.Push(val);
  } else {
    let i = list.indexOf(val);
    list.splice(i, 1);
  }
}

Ich hoffe, das würde jemandem helfen, der das gleiche 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 hat ein anderes Array wie dieses [[true, 'id_1'], [false, 'id_2'], [true, 'id_3'] ...] .__ bedeutet, dass der Benutzer das Kontrollkästchen aktiviert und das Kontrollkästchen deaktiviert hat .. Die Elemente, die der Benutzer noch nie geprüft hat, werden nicht in das Array eingefügt.

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);

}

1. Ich habe gerade etwas für diejenigen vereinfacht, die eine Liste von Value Object . XYZ.Comonent.html

   <div class="form-group">
           <label for="options">Options :</label>
           <div *ngFor="let option of xyzlist">
               <label>
                   <input type="checkbox"
                          name="options"
                          value="{{option.Id}}"
   
                          (change)="onClicked(option, $event)"/>
                   {{option.Id}}-- {{option.checked}}
               </label>
           </div>
           <button type="submit">Submit</button>
       </div> 
   

   ** XYZ.Component.ts **.

2. erstellen Sie eine Liste - xyzlist.

3. werte zuweisen, ich übergeben Werte aus Java in dieser Liste.
4. Die Werte sind Int-Id, Boolean-geprüft (Kann in Component.ts übergeben werden).

5. Um jetzt einen Wert in Componenet.ts zu erhalten.

   xyzlist;//Just created a list
   onClicked(option, event) {
       console.log("event  " + this.xyzlist.length);
       console.log("event  checked" + event.target.checked);
       console.log("event  checked" + event.target.value);
       for (var i = 0; i < this.xyzlist.length; i++) {
           console.log("test --- " + this.xyzlist[i].Id;
           if (this.xyzlist[i].Id == event.target.value) {
               this.xyzlist[i].checked = event.target.checked;
           }
           console.log("after update of checkbox" + this.xyzlist[i].checked);
   
       }
   

Ich bin auf das gleiche Problem gestoßen und jetzt habe ich eine Antwort, die mir mehr gefällt (vielleicht auch Sie). Ich habe jedes Kontrollkästchen an einen Array-Index gebunden.

Zuerst habe ich ein Objekt wie folgt definiert:

SelectionStatusOfMutants: any = {};

Dann sind die Checkboxen so:

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

Wie Sie wissen, sind Objekte in JS Arrays mit beliebigen Indizes. Das Ergebnis wird also so einfach abgerufen:

Zähle so ausgewählte aus:

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

Und ähnlich wie das Holen von ausgewählten wie folgt:

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

Siehst du ?! Sehr einfach sehr schön TG.

Da ich lange Zeit damit verbracht habe, ein ähnliches Problem zu lösen, antworte ich, um meine Erfahrungen zu teilen. Mein Problem war das gleiche, zu wissen, viele Kontrollkästchen Wert zu bekommen, nachdem ein bestimmtes Ereignis ausgelöst wurde. Ich habe viele Lösungen ausprobiert, aber für mich ist die Verwendung von ViewChildren das sexieste.

import { ViewChildren, QueryList } from '@angular/core';

/** Get handle on cmp tags in the template */
@ViewChildren('cmp') components: QueryList<any>;

ngAfterViewInit(){
    // print array of CustomComponent objects
    console.log(this.components.toArray());
}

Hier gefunden: https://stackoverflow.com/a/40165639/4775727

Potentielle andere Lösungen für ref, es gibt viele ähnliche Themen, keine von ihnen haben diese Lösung zum Ziel ...:

• Angular 6: Wie erstelle ich ein einfaches Mehrfach-Kontrollkästchen, das vom Benutzer aktiviert/deaktiviert werden soll?
• Angular 6 Abrufen von Werten aus mehreren Kontrollkästchen und Senden von
• Angular Wie erhalte ich den Wert für mehrere Kontrollkästchen?
• Angular 2: Werte mehrerer aktivierter Kontrollkästchen abrufen
• https://medium.com/@vladguleaev/reusable-angular-create-multiple-checkbox-group-component-84f0e4727677
• https://netbasal.com/handling-multiple-checkboxes-in-angular-forms-57eb8e846d21
• https://medium.com/@shlomiassaf/the-angular-template-variable-you-are-missing-return-of-the-var-6b573ec9fdc
• https://www.bennadel.com/blog/3205-verwenden-von-Formularkontrollen-ohne-Formularmodul-oder-NG-Modell
• Wie bekomme ich Checkbox-Wert in Winkel 5 App
• Angular 2: Werte mehrerer aktivierter Kontrollkästchen abrufen
• Filtern nach Kontrollkästchen in Winkel 5
• Zugriff auf mehrere Kontrollkästchenwerte in Angular 4/5

Die @ccwasden-Lösung oben funktioniert für mich mit einer kleinen Änderung. Jedes Kontrollkästchen muss einen eindeutigen Namen haben, ansonsten funktioniert die Bindung nicht

<div class="form-group">
    <label for="options">Options:</label>
    <div *ngFor="let option of options; let i = index">
        <label>
            <input type="checkbox"
                   name="options_{{i}}"
                   value="{{option.value}}"
                   [(ngModel)]="option.checked"/>
            {{option.name}}
        </label>
    </div>
</div>

// my.component.ts

@Component({ moduleId:module.id, templateUrl:'my.component.html'})

export class MyComponent {
  options = [
    {name:'OptionA', value:'1', checked:true},
    {name:'OptionB', value:'2', checked:false},
    {name:'OptionC', value:'3', checked:true}
  ]

  get selectedOptions() { // right now: ['1','3']
    return this.options
              .filter(opt => opt.checked)
              .map(opt => opt.value)
  }
}

und stellen Sie sicher, dass Sie FormsModule in Ihr Hauptmodul importieren

import { FormsModule } from '@angular/forms';


imports: [
    FormsModule
  ],