Angular 2: Obtenir des valeurs de plusieurs cases à cocher vérifiées

Voici une façon simple d'utiliser ngModel (final Angulaire 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)
  }
}

créer une liste comme :-

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>

ensuite, dans sa composante 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
  }
}

1. je viens de simplifier un peu pour ceux qui utilisent la liste de Objet de valeur. 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.Composant.ts**.

2. créer une liste -- xyzlist.

3. assigner des valeurs, je passe des valeurs de Java dans cette liste.
4. les valeurs sont Int-Id, Boolean-checked (peut passer dans Component.ts).

5. Maintenant, pour obtenir la valeur en Composante.ts.

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

j'espère que cela aidera quelqu'un qui a le même problème.

gabarit.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>

composant.ts

flightids array aura d'autres tableaux comme celui-ci [[true, 'id_1'], [false, 'id_2'], [true, 'id_3']...] ici, le vrai moyen de l'utilisateur de vérifier, false signifie que l'utilisateur vérifié ensuite décoché. Les éléments que l'utilisateur n'a jamais cochés ne seront pas insérés dans le tableau.

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

}

je viens de faire face à ce problème, et a décidé de faire tout fonctionne avec autant moins de variables que je peux, pour garder l'espace de travail propre. Voici un exemple de mon code

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

méthode, qui appelle le changement pousse la valeur dans le modèle, ou la supprime.

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

j'ai rencontré le même problème et maintenant j'ai une réponse que j'aime plus (peut-être vous aussi). J'ai limité chaque case à cocher à un index de tableau.

j'ai d'Abord défini un Objet comme ceci:

SelectionStatusOfMutants: any = {};

Puis cocher les cases sont comme ceci:

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

comme vous le savez, les objets dans JS sont des tableaux avec des indices arbitraires. De sorte que le résultat sont extraites de manière simple:

Compter ceux qui sont sélectionnés comme ceci:

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

et similaire à ce fetch ceux qui sont sélectionnés comme ceci:

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

Vous voyez?! Très simple, très beau. TG.