Angular 每个按键上的角度2更改事件

更改事件仅在输入的焦点更改后调用。如何使事件在每次按键时触发

{{mymodel}}

顺便说一句，第二个绑定在每次按键时都会更改。

{{mymodel}}

使用

ngModelChange

将

[（x）]

语法分为两部分，即属性数据绑定和事件绑定：

{{mymodel}}

valuechange（newValue）{
mymodel=newValue；
console.log（newValue）
}

它也适用于退格键。

存档.ts

myMethod（值：字符串）{
...
...
}

我刚刚使用了事件输入，它工作正常，如下所示：

在.html文件中：

在.ts文件中：

onSearchChange（searchValue:string）：void{
console.log（searchValue）；
}

保持模型同步的秘密事件是事件调用输入。因此，你的问题最好的答案应该是：

{{mymodel}}

keyup事件是您的最佳选择。 让我们看看原因：

（更改）如您所述，只有当输入失去焦点时才会触发，因此使用有限

（按键）在按键时触发，但在某些按键（如退格）时不会触发

（keydown）每次按下一个键时触发。因此总是落后1个字符；因为它在注册击键之前获取元素状态

（keyup）是您的最佳选择，因为它会在每次按键事件完成时触发，因此这也包括最近的角色

所以（keyup）是最安全的，因为它。。。

• 在每个击键（更改）事件上注册一个事件
• 包括（按键）忽略的键
• 与（按下键）事件不同，没有延迟

---

你要找的是

<input type="text" [(ngModel)]="mymodel" (keyup)="valuechange()" />
{{mymodel}}

{{mymodel}}

---

然后通过访问.ts文件中的绑定

this.mymodel

对数据执行任何操作。

处理此类情况的另一种方法是在初始化组件时使用并订阅其

值更改，这将允许您使用rxjs操作符来满足高级需求，如执行http请求，在用户写完一个句子之前应用解块，取最后一个值并省略上一个

从'@angular/core'导入{Component，OnInit}；
从'@angular/forms'导入{FormControl}；
从'rxjs/operators'导入{debounceTime，distinctUntilChanged}；
@组成部分({
选择器：“某个选择器”，
模板：`
`
})
导出类SomeComponent实现OnInit{
私有搜索控制：FormControl；
私人去盎司：数字=400；
恩戈尼尼特（）{
this.searchControl=新表单控件（“”）；
this.searchControl.valueChanges
.pipe（debounceTime（this.debounce），distinctUntilChanged（））
.subscribe（查询=>{
console.log（查询）；
});
}
}
在我的例子中，解决方案是：

[ngModel]="X?.Y" (ngModelChange)="X.Y=$event"

对于被动表单，您可以订阅对所有字段所做的更改，也可以只订阅特定字段

获取FormGroup的所有更改：

this.orderForm.valueChanges.subscribe(value => {
    console.dir(value);
});

获取特定字段的更改：

this.orderForm.get('orderPriority').valueChanges.subscribe(value => {
    console.log(value);
  });

我一直在数字字段上使用keyup，但今天我注意到chrome中的输入有向上/向下按钮来增加/减少keyup无法识别的值

我的解决方案是同时使用keyup和change：

(keyup)="unitsChanged[i] = true" (change)="unitsChanged[i] = true"

初始测试表明，该方法工作正常，如果在进一步测试后发现任何错误，将发回。
我在Angular 11中通过使用以下代码解决了此问题：



而且，
experienceToAndFrom（）
是我的组件中的一个方法

PS：我尝试了上述所有解决方案，但都没有成功。
有效，但奇怪的是，退格键没有被识别为按键？您可能需要使用
keydown
或
keyup
。有些键在按下
键时无法启动。另请参见我尝试了keydown、keyup和change事件，但当输入为w时，事件处理程序向我报告空字符串；当输入为we时，事件处理程序向我报告w作为输入。你能解释一下为什么会有这种行为吗？用按键。输入在keydown上还没有改变。这很奇怪，但我在这方面得到了一个输入延迟，值直到下一次按键时才包含键入的值。欢迎来到SO Ulric，请解释你的代码是如何解决这个问题的。但是当使用香蕉盒子语法时，它只会改变模型，但是你不能把一些东西挂在变更事件上。这是最好的双向数据绑定的一个很好的答案。应该是公认的答案！退格键未更新解决方案正确的模型。但是，请注意，ngModelChange是在值更新之前触发的。因此，本例中的“newValue”包含没有您刚才按下的键的模型-因此您没有更新的模型。如果要获得最新的模型值，请使用（keyup）事件。@SateeshKumarAlli您有哪个版本的Angular？对我来说，它确实能检测到角度6.1.3中的退格。对我有用。这正是我想要的。我们怎么能耽搁一段时间呢？太好了！谢谢你工作得很好，谢谢洛蒂特为我所做的@andreidiaconescute（输入）事件在Edge和IE浏览器中不受支持。在Edge浏览器中有什么替代方案？如其中一个答案中所述，输入事件工作得非常好
keyup
无疑是最安全的选项之一，但是，
input
事件比
keyup
提前一步
keyup
与
input
不同，如果文本框的值通过任何其他方式（如binding）更改，则该选项不起作用。Sagar，非常感谢。这应该是公认的答案，因为它是唯一一个真正解决
（更改）
问题的解决方案，然后是一些解决方案。被接受的答案太糟糕了！这应该是acc