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

Mon problème est très simple: j’ai une liste de cases à cocher comme ceci:

Et je voudrais envoyer un tableau des options sélectionnées, quelque chose comme: [option1, option5, option8] si les options 1, 5 et 8 sont sélectionnées. Ce tableau fait partie d’un JSON que je souhaite envoyer via une requête HTTP PUT.

Merci de votre aide!

Voici un moyen simple d’utiliser ngModel (Angular 2 final)

  

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

J’ai trouvé une solution grâce à Gunter! Voici mon code si cela peut aider quelqu’un:

 

Voici les 3 objects que j’utilise:

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

Et il y a 3 méthodes utiles:

1 . Pour initier les optionsMap :

 initOptionsMap() { for (var x = 0; x 

2. pour mettre à jour les optionsMap

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

3. convertir optionsMap en optionsChecked et le stocker dans les options avant d'envoyer la requête POST:

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

créer une liste comme: –

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

Html: –

 

alors dans son composant 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); 

}

  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 une liste d’objects de valeur. XYZ.Comonent.html

     

    ** XYZ.Component.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, booléen -checked (Peut passer dans Component.ts).
  5. Maintenant, obtenez de la valeur dans Componenet.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.

templet.html

 

composant.ts

Le tableau flightids aura un autre tableau comme ceci [[true, ‘id_1’], [false, ‘id_2’], [true, ‘id_3’] …] ici vrai signifie que l’utilisateur l’a vérifié, false signifie que l’utilisateur a 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 j’ai décidé de faire en sorte que tout fonctionne avec le moins de variables possible, pour que l’espace de travail rest propre. Voici l’exemple de mon code

  

La méthode, qui fait appel au 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 à un index de tableau.

J’ai d’abord défini un object comme ceci:

 SelectionStatusOfMutants: any = {}; 

Ensuite, les cases à cocher sont comme suit:

  

Comme vous le savez, les objects dans JS sont des tableaux avec des indices arbitraires. Le résultat est donc si simple:

Comptez celles sélectionnées comme ceci:

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

Et similaire à celui-ci, récupérez ceux sélectionnés comme ceci:

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

Tu vois?! Très simple très belle. TG