Starten ein Ereignis, wenn die überprüfung eine checkbox in Angular2

Ich bin Neuling in Angular2 und im web-weltweit , ich will Aktion starten, dass die änderungen ein oject Parameter-Wert in der Datenbank bei der überprüfung der checkbox und deaktivieren oder es mit Material-Design habe ich versucht mit [(ngModel)] aber nichts passiert. die Idee ist, dass ich haben Sie einige Vorschläge mit checked | unchecked status zu sagen, wenn es eine true oder false proposition. Hier ist die proposition Modell

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

hier ist der Html-code für eine Aussage :

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

hier ist der TypeScript-code für das hinzufügen der proposition:

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

Und wie man sehen kann habe ich die false standardmäßig für die proposition status und ich will es ändern, sobald ich überprüft den Vorschlag.
Hier ist ein Bild wie es aussieht für ein besseres Verständnis Problem.
Starten ein Ereignis, wenn die überprüfung eine checkbox in Angular2

Jede Hilfe Bitte ?

InformationsquelleAutor der Frage selem mn | 2016-05-06

  1. 71

    PLUNKER DEMO

    Vorlage: change-Ereignis um die Funktion aufrufen, und übergeben Sie die Veranstaltung.

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

    TS: das Ereignis erhalten und überprüfen, ob das Kontrollkästchen aktiviert ist, bevor Sie hinzufügen Eigenschaft.

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

    InformationsquelleAutor der Antwort Ankit Singh

  2. 11

    Wenn Sie hinzufügen, Doppel-paranthesis der ngModel Referenz erhalten Sie eine zwei-Wege Bindung zu Ihrem Modell-Eigenschaft. Diese Eigenschaft kann dann gelesen und verwendet werden in der Ereignis-handler. Meiner Ansicht nach, dass ist der sauberste Ansatz.

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

    InformationsquelleAutor der Antwort Jakob Lithner

  3. 4

    Können Sie ngModel wie

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

    Zur Aktualisierung der checkbox-Zustand durch die Aktualisierung der Eigenschaft checkboxValue im code und, wenn die checkbox vom Benutzer geändert addProp() genannt wird.

    InformationsquelleAutor der Antwort Günter Zöchbauer

  4. 1

    Überprüfen Demo: 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>

    InformationsquelleAutor der Antwort Vijay Chauhan

Schreibe einen Kommentar