html5 checkbox data-binding typescript angular

html5 - Lanzar un evento al marcar una casilla de verificación en Angular2



onload angular 4 (4)

Puedes usar ngModel como

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

Para actualizar el estado de la checkboxValue de checkboxValue actualizando la propiedad checkboxValue en su código y cuando el usuario addProp() la casilla de verificación, se addProp() .

Soy novato en Angular2 y en la web a nivel mundial, deseo lanzar una acción que cambie un valor de parámetro de ojeción en la Base de datos al marcar una checkbox o desmarcarlo usando Material-Design , lo intenté con [(ngModel)] pero no pasó nada . la idea es que tengo que agregar algunas proposiciones con checked | unchecked estado checked | unchecked para decir si es una proposición true o false . Aquí está el modelo de proposición

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

aquí está el código Html para una proposición:

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

aquí está el código de TypeScript para agregar la proposición:

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

Y como pueden ver, lo convertí en false por defecto para el proposition status de la proposition status y quiero cambiarlo una vez que verifiqué la proposición. Aquí hay una imagen de cómo se ve una mejor comprensión de problemas.

Cualquier ayuda por favor?


Si agrega doble paránthesis a la referencia de ngModel, obtendrá un enlace bidireccional con la propiedad de su modelo. Esa propiedad se puede leer y usar en el controlador de eventos. En mi opinión, ese es el enfoque más limpio.

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


DEMO DE PLUNKER

Plantilla: utilice el evento de cambio para llamar a la función y pasar el evento.

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

TS: recibe el evento y marca si la casilla de verificación está marcada antes de agregar propiedad.

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


Ver demostración : https://stackblitz.com/edit/angular-6-checkbox?embed=1&file=src/app/app.component.html

CheckBox: use change event to call the function and pass the event. <label class="container"> <input type="checkbox" [(ngModel)]="theCheckbox" data-md-icheck (change)="toggleVisibility($event)"/> Checkbox is <span *ngIf="marked">checked</span><span *ngIf="!marked">unchecked</span> <span class="checkmark"></span> </label> <div>And <b>ngModel</b> also works, it''s value is <b>{{theCheckbox}}</b></div>