angular2 ngmodel 无法绑定我希望的值答案

【问题标题】：angular2 ngmodel can't bind the value i wishangular2 ngmodel 无法绑定我希望的值
【发布时间】：2017-03-14 13:00:37
【问题描述】：

这是我的 html 模板代码：

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

还有我的 validateFloat 方法：

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

那么当输入值时：

12adc

输入元素输出值：

但是 groupInfo.discount 的值是：

12a

我不明白为什么 groupInfo.discount 的值是12a？

我怎样才能使 groupInfo.discount 的值等于输入元素的值？

我的包依赖：

"@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",

【问题讨论】：

你想做什么你能解释一下吗？
我希望 groupInfo.discount 的值等于输入元素的值

标签： angular events typescript ngmodel

【解决方案1】：

如果您在模板中使用输入 && ngModel 比 (keyup) 更好，请使用 (ngModelChange) 事件

template.html

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

我认为它只有trigger issue 和event

【讨论】：

据我所知，只有一个值的差异。在您的示例中，有两个区别。你的 Angular 版本是什么

【解决方案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 必须异步工作，这可能会导致意外行为。

【讨论】：

groupInfo.discount 值不等于输入元素的值