angular2 checkbox ng-model nicht aktualisiert

Question

Ich versuche eine einfache Sache mit Angular 2.0 Ich möchte ein Modell an eine 'Eingabe-Checkbox' binden, die 'Änderung' mit einer Methode registrieren, lassen Sie die Methode ausgeführt werden, wenn der Checkbox-Zustand wird geändert und agiert basierend auf dem Status des Modells. Alles funktioniert, aber wenn die mit dem Änderungsereignis verknüpfte Methode ausgeführt wird, ist der Status des Modells das Gegenteil dessen, was ich erwarte, d. H. Ist falsch, wenn das Kontrollkästchen aktiviert ist, wenn das Kontrollkästchen nicht ausgewählt ist. Hier ist das Code-Snippet;

<input value={{object.name}} type="checkbox" [(ng-model)]="object.selected" (change)="onChange(object.selected)"> 

Irgendeine Idee über das, was ich falsch mache?

Answer 1

Ich habe es wie folgt umgesetzt: <input #angularcb type="checkbox" (change)="angular = angularcb.checked" />

Sie können auch weitere Informationen und eine Live-Demo sehen hier: http://www.syntaxsuccess.com/viewarticle/input-controls-in-angular-2.0 http://www.syntaxsuccess.com/angular-2-samples/#/demo/input

Answer 2

Sie können auch das Ereignisobjekt versuchen und inspizieren und einfach herausziehen geprüft Parameter

<input value={{object.name}} type="checkbox" [(ng-model)]="object.selected" (change)="onChange($event)"> 


onChange(event) { 
    var isChecked = event.currentTarget.checked; 
} 

• scheint, wie das Ereignis b abgefeuert wird Bevor das Modell aktualisiert werden kann. Es funktioniert derzeit gut für meine ausgewählten Elemente.

Answer 3

dies ausprobieren

app.html

<span *ngFor="#ca of classArray; #i=index">           
    <input type="checkbox" id="{{ca.id}}" #cv [checked]=false          
    (change)="onChange(ca.id,cv.checked)"> 
     {{ca.class_name}},{{cv.checked}} <br> 
</span> 

app.ts

onChange(classId,flag){ 
     console.log(classId+" : "+flag); 
    } 

Answer 4

Ab angular2.beta8 dieser einfache Trick

tun

<input type="checkbox" [(ngModel)]="object.selected" />

Answer 5

Für mich funktioniert nur, wenn ich (ngModelChange) verwendet:

<input type="checkbox" [(ngModel)]="object.selected" (ngModelChange)="onChange(object.selected)"> 

Wenn ich (change) oder (click) der Staat verwenden ist immer Gegenteil von dem, was ich erwarten, wie Sie

sagte

Answer 6

Ein Weg zu tun es ohne ngModell

<input 
    id="{{fieldId}}" 
    type="checkbox" 
    [checked]="displayValue" 
    (click)="setDisplayValue($event.target.checked)" 
> 

anzeige wäre Getter/Setter setDisplayValue() -Methode den Datensatz aktualisieren und somit würde anzeige

Answer 7

<input type="checkbox" [ngModel]="object.selected == 'Y'" (ngModelChange)="object.selected=$event?'Y':'N'">

Answer 8

vergessen aktualisiert werden Sie nicht den Namen oder das Kontrollkästchen, um nicht aktualisieren und Sie erhalten einen Fehler auf der Konsole.

<label>Sign on<input type="checkbox" name='showLogin2' [(ngModel)]="model.ShowLogin" ></label> 

Answer 9

Versuchen Sie so.

<input type="checkbox" [checked]="object.completed" (change)="object.completed = !objected.completed" > 

Answer 10

nur in Tag des Eingabetypen geprüft schreiben:

<input type="checkbox" name="abc" checked /> 

Answer 11

Angular 2.xx stabil: einfache Möglichkeit, eine Checkbox, zu wissen, aktiviert ist oder nicht:

<input type="checkbox" #checkbox (change)="check(checkbox.checked)"> 

ts:

export class component{ 
    constructor() {} 

    check(checked){ 

    if(checked){ 
     // checked 
    }else{ 
     // not checked 
    } 
    } 

Answer 12

<input type="checkbox" [(ngModel)]="object.selected" /> 
 
<div>{{object | json}}</div>

Answer 13

Eingang

<input type="checkbox" (change)="selectionChange($event.srcElement)"> 

Änderungsereignis

selectionChange(input: HTMLInputElement) { 
    input.checked === true 
     ? doSomethingIfTrue() 
     : doSomethingIfFalse(); 
}