Angular5 - 除非单击或按下键，否则不会显示更改检测答案

【问题标题】：Angular5 - Change detection not showing unless clicked or key pressedAngular5 - 除非单击或按下键，否则不会显示更改检测
【发布时间】：2018-03-14 04:10:48
【问题描述】：

我在我的 Angular5 应用程序中遇到问题，需要额外单击或在键盘上按任意键来呈现我的组件。我已经尝试添加 cd.detectChanges() 并且还尝试使用 blur() 方法来消除对我的搜索框的关注（用户输入一些文本并在输入框上按回车键，我应该呈现一些与该搜索相关的相关组件）。当我手动单击页面上的任意位置或按任意键时，所需的组件会被加载，直到那时它才会显示以前的组件。这几乎就像是在触发其他事件时发生更改检测。我什至尝试手动生成点击事件，但什么也没发生。任何帮助将不胜感激...感谢您的宝贵时间！

Angular 2 有一个类似的帖子，但我已经尝试了该帖子中提到的所有解决方案。 - Angular2 - Change detection not showing unless clicked

【问题讨论】：

标签： angular5

【解决方案1】：

使用 keyup 而不是 keypress。

<input (keyup)="onKey($event)">

keypress 不应用于检测文本输入的内容，原因如下：

keypress 事件不会在特殊输入上触发，例如enter
keypress 甚至在文本输入完成之前触发

【讨论】：

我们使用 onKeyUp 如下.. onKeyUp(event) { if (event.keyCode === 13) { this.submit(); } }
Keypress 不适用于特殊键盘输入，例如 enter（键代码 13），因此如果您使用 keypress，该功能甚至不会被触发。
谢谢，但正如我提到的，我们没有为此使用按键事件。在此组件的视图模板上，这是事件的连接方式。

【解决方案2】：

在表单中添加（提交）事件而不是 onKeyUp()。最初，我添加了（提交）事件和“提交”类型的隐藏按钮，我认为由于提交按钮，更改正在工作，但事实并非如此。这是连接到角度形式的（提交）事件。 (submit)="onSubmit()"

【讨论】：