javascript - Angular2 ngModel ändra bindning på Input typ="number"

Jag har ett nummerfält och när jag försöker ändra värdet med ett onChange-evenemang fungerar det inte.

Jag har försökt samma sak för ett textinmatningsfält och det fungerar perfekt.

<input
   type="number"
   [(ngModel)]="element.value" 
   (change)="onChange($event)"
   >

export class NumFieldComponent {
    @Input() index;
    @Input() element; //element.value = 0

    onChange($event){

        var confirm = confirm("Are you sure about this?")

        if(confirm){
            //True, accept the value
        } else {
            this.element.value = 0;
            //Failed, set the input back to 0
        }
    }
}

Jag är ny på Angular2, så vad missar jag här?

PS. Jag har sett ett liknande problem med inmatningar som tar booleska värden

Svar #1

att byta till enkelriktad bindning fungerade för mig, och det är renare att inte utlösa ändringen om användaren avbryter också (notera att jag fortfarande var tvungen att manuellt uppdatera DOM som du ser):

<input
   type="number"
   [ngModel]="element.value"   // one way binding
   (change)="onChange($event)"
   >

export class NumFieldComponent {
    @Input() index;
    @Input() element; //element.value = 0

    onChange($event){

        var confirm = confirm("Are you sure about this?")

        if(confirm){
            this.element.value = $event.target.value
        } else {
            $event.target.value = 0;
            //Failed, set the input back to 0
        }
    }
}

Svar #2

Inte provat men kan fungera

export class NumFieldComponent {
    @Input() index;
    @Input() element; //element.value = 0

    constructor(cdRef:ChangeDetectorRef) {}

    onChange($event){

        var confirm = confirm("Are you sure about this?")

        if(confirm){
            //True, accept the value
        } else {
            this.element.value = 0;
            this.cdRef.detectChanges(); // <<<=== added
            //Failed, set the input back to 0
        }
    }
}

Relaterade artiklar