Question

这是我的html模板代码：＆lt; input type =“text”maxlength =“5” [（ngModel）] =“groupInfo.discount”（keyup）=“validateFloat（$ event）”＆gt; 有我的validateFloat方法： validateFloat（事件）{ event.target.value = event.target.value.replace（/ [^ \ d。] / g，“”）; 的console.log（this.groupInfo.discount）; } 那么当输入值： 12adc 输入元素输出值： 12 但groupInfo.discount值是： 12A 我不明白为什么groupInfo.discount值是12a？我怎样才能使groupInfo.discount值等于input元素的值？我的包依赖项： “@ angular / common”：“2.0.0-rc.6”， “@ angular / compiler”：“2.0.0-rc.6”， “@ angular / core”：“2.0.0-rc.6”， “@ angular / forms”：“2.0.0-rc.6”， “@ angular / http”：“2.0.0-rc.6”， “@ angular / platform-browser”：“2.0.0-rc.6”， “@ angular / platform-browser-dynamic”：“2.0.0-rc.6”， “@ angular / router”：“3.0.0-rc.2”，

Answer 1

如果您正在使用输入＆amp;＆amp;模板中的ngModel优于(keyup)使用(ngModelChange)事件

template.html

<input type="text" maxlength="5" 
[(ngModel)]="groupInfo.discount" (ngModelChange)="validateFloat($event)">

我认为只有trigger issue event

Answer 2

看起来你的更新没有被ngModel正确选取。

尝试异步执行更新：

validateFloat(event){
   setTimeout(() => {
    event.target.value = event.target.value.replace(/[^\d.]/g, "");
    console.log(this.groupInfo.discount);
   }, 50);
}

ngModel在尝试使用它时会有一些不直观的行为，因为它正在尝试做什么 - （将组件中的更改反映到DOM并更改组件中的DOM）。由于Angular不允许您在更改检测周期中检查后更改值，因此ngModel必须异步工作，这可能会导致意外行为。

angular2 ngmodel无法绑定我想要的值

2 个答案: