Angulaire 4 les valeurs de cases à cocher

Je suis nouveau sur angulaire et je suis coincé à ce joli problème simple. Je suis l'obtention de données à partir d'un webservice pour montrer un couple de cases à cocher. J'ai besoin d'un moyen pour obtenir la valeur de toutes les cases à cocher sélectionnée par l'utilisateur. Je suis à l'aide de matériel de thème.

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

OriginalL'auteur Ninad Gaikwad | 2017-07-08

  1. 8

    Vous pouvez ajouter un change événement à md-checkbox et de passer de l'objet à une fonction. Maintenir un array que garder la trace de ceux qui a obtenu checked et unchecked et mise à jour de la matrice en fonction de cela.

    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>

    composant.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 démo

    Merci!!!! Je vais l'essayer.
    Il fonctionne parfaitement! Merci une tonne

    OriginalL'auteur Nehal

  2. 10

    Au lieu de e.checked vous pouvez utiliser les éléments suivants:

    Exemple de travail

    HTML

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

    Tapuscrit

    selectBadge (e, id) {

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

}
    Je suppose que vous avez fait référence à la réponse à cette question. Merci de modifier votre réponse à l'inclure. Dans l'avenir, envisager d'ajouter ces petits ajouts comme les commentaires de l'autre réponse. Bonus: je pense que vous avez fait une hypothèse valide. Vous utilisez <input> tandis que l'autre answe est à l'aide d'un <md-checkbox>. Les événements sont différents pour les deux types

    OriginalL'auteur Alex Kumundzhiev