Avviare un evento quando si seleziona una casella di controllo in Angular2

Question

Sono newbie in Angular2 e nel Web a livello globale, voglio avviare un'azione che modifica un valore di parametro di oject nel Database quando si verifica un checkbox o deselezionandolo utilizzando Material-Design, I provato con [(ngModel)] ma non è successo nulla. l'idea è che devo aggiungere alcune proposizioni con lo stato checked | unchecked per dire se si tratta di una proposizione true o false. Ecco il modello proposizione

export class PropositionModel { 
     id:string; 
     wordingP:string; // the proposition 
     propStatus:Boolean; // the proposition status 
} 

qui è il codice HTML per una proposta:

<div class="uk-width-xlarge-1-1 uk-width-medium-1-2"> 
       <div (submit)="addProp1()" class="uk-input-group"> 
        <span class="uk-input-group-addon"><input type="checkbox" data-md-icheck/></span> 
        <label>Proposition 1</label> 
        <input [(ngModel)]="proposition1.wordingP" type="text" class="md-input" required class="md-input"/> 
       </div> 
      </div> 

qui è il codice dattiloscritto per l'aggiunta la proposizione:

addProp1() { 
     this.proposition1 = new PropositionModel(); 
     this.proposition1.propStatus = false; 
     this.propositionService.addProposition(this.proposition1) 
      .subscribe(response=> { 
       console.log(response); 
       console.log(this.proposition1); 
       this.proposition1 = new PropositionModel();}) 
    } 

E come si può vedere l'ho reso un false di default per il proposition status e voglio cambiarlo dopo aver controllato la proposta. Ecco un'immagine come cerca una migliore comprensione del problema.

Qualsiasi aiuto Per favore?

Answer 1

PLUNKER DEMO

Template:utilizzo evento di modifica per chiamare la funzione e passare l'evento.

<input type="checkbox" data-md-icheck (change)="addprop1($event)"/> 

TS:ricevano l'evento e controllare se casella è selezionata prima di aggiungere proprietà.

addProp1(e) { 

    if(e.target.checked){ 
     this.proposition1 = new PropositionModel(); 
     this.proposition1.propStatus = false; 
     this.propositionService.addProposition(this.proposition1) 
      .subscribe(response=> { 
       console.log(response); 
       console.log(this.proposition1); 
       this.proposition1 = new PropositionModel();}) 
    } 
} 

Answer 2

È possibile utilizzare ngModel come

<input type="checkbox" [ngModel]="checkboxValue" (ngModelChange)="addProp($event)" data-md-icheck/> 

Per aggiornare lo stato di casella di controllo aggiornando la proprietà checkboxValue nel codice e quando la casella è modificato dall'utente addProp() è chiamato.

Answer 3

Se si aggiunge una doppia para- resi al riferimento di ngModel, si ottiene un legame bidirezionale con la proprietà del modello. Quella proprietà può quindi essere letta e utilizzata nel gestore eventi. Secondo me è l'approccio più pulito.

<input type="checkbox" [(ngModel)]="myModel.property" (ngModelChange)="processChange()" />