Angular2 ngModel改变了Input type="number"的绑定

Angular2 ngModel change binding on Input type="number"

本文关键字：quot 绑定 number 改变 ngModel Input type Angular2      更新时间：2023-09-26

我有一个数字类型输入，当我试图用onChange事件改变值时，它不起作用。

我也尝试过同样的文本输入，它工作得很好。

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

我是新的Angular2，所以我在这里错过了什么?

p。我在输入

时看到过类似的问题。

更改为单向绑定对我来说有效，如果用户也取消，则不触发更改更干净(注意，如您所见，我仍然必须手动更新DOM):

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

未尝试但可能成功

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
        }
    }
}
相关文章：