angular2 checkbox ng-model non aggiornato

Question

Sto provando una cosa semplice con Angular 2.0 Voglio associare un modello a una "casella di spunta", registrare la "modifica" con un metodo, avere il metodo eseguito quando lo stato della casella di controllo è cambiato e agisce in base allo stato del modello. Tutto funziona ma, quando viene eseguito il metodo collegato all'evento change, lo stato del modello è il contrario di ciò che mi aspetto, ovvero è falso quando la casella di controllo è selezionata, è true quando la casella di controllo non è selezionata. Ecco lo snippet di codice;

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

Qualche idea su cosa sto facendo male?

Answer 1

ho implementato in questo modo: <input #angularcb type="checkbox" (change)="angular = angularcb.checked" />

Inoltre potrai vedere maggiori dettagli e un demo live qui: http://www.syntaxsuccess.com/viewarticle/input-controls-in-angular-2.0 http://www.syntaxsuccess.com/angular-2-samples/#/demo/input

Answer 2

si può anche provare e controllare l'oggetto dell'evento e basta tirare fuori il controllato parametro

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


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

• sembra che l'evento è di essere licenziato b Prima che la modella abbia la possibilità di aggiornarsi. Attualmente funziona bene per i miei elementi selezionati.

Answer 3

provare questo

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

partire angular2.beta8 questo semplice trucco faranno

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

Answer 5

Per me funziona solo quando ho usato (ngModelChange):

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

Se uso (change) o (click) lo stato è sempre contrario di quello che mi aspetto, come hai detto

Answer 6

Un modo per farlo senza ngModel

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

DisplayValue sarebbe metodo getter/setter setDisplayValue() aggiornerà il record e quindi DisplayValue verrebbe aggiornato

Answer 7

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

Answer 8

Non dimenticare di includere un nome o la casella di controllo non aggiornerà e riceverai un errore sulla console.

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

Answer 9

Provare così.

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

Answer 10

basta scrivere controllato nel tag di tipo di ingresso:

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

Answer 11

angolare 2.xx stabile: facile modo per conoscere una casella è selezionata o meno:

<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

ingresso

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

evento di modifica

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