角度 6 - 使用键盘输入关闭模态

Question

我用最少的代码在StackBlitz上重现了这个问题。

步骤1：在输入中输入一个单词，然后按键盘输入按钮

第 2 步：将显示模态

步骤3：按键盘上的回车键

在步骤2中，我收到波纹管错误：

表达式已更改

之后已检查错误：表达式已更改 检查后。以前的值："ng-untouched：true"。当前 值："NG-未触及：假"。

步骤 3 应该关闭模态，但模态关闭然后重新打开，但是，当我用鼠标按下确认按钮时，它会正确关闭模态。

Answer 1

问题是您在输入事件上打开了模式，当您按 Enter 确认按钮时，它会关闭模式，但也触发与您的文本框相关的事件。

(keyup.enter)=

所以这就像你按 Enter 第一个模态关闭，然后你的输入框事件触发，然后按照逻辑模态再次打开。 您可以通过将事件更改为仅键控来确认这一点。然后，对于每个密钥，您都会遇到与Enter报告的相同问题。

(keyup)=

Answer 2

处理 ExpressionChangedAfterItHasBeenCheckedError： 将更改值的方法放在设置的超时内

setTimeout(() => {
// Method changing the value of property
},0);

Answer 3

如果你想摆脱这个问题，一种方法是添加一个标志并切换它。