Javascript 将单击事件侦听器添加到动态插入的元素中

我有一个保存在字符串中的表单，我需要提交它

在组件中，我使用

display:none

创建div，然后将其

innerHTML

设置为字符串形式

<div class="form" #form [innerHTML]="formInnerHTML"></div>

---

@ViewChild（'form'）
表格：ElementRef；
this.formInnerHTML=this.sanitizer.bypassSecurityTrustHtml（response.htmlForm）；
this.form.nativeElement.getElementsByTagName（'input'）[2]。单击（）//此处出现问题，无法读取未定义的单击

当我点击第三个输入时，表单被提交

但是问题是

这个.form

是ElementRef而不是更新。当我在调用

click（）

之前对其进行控制台日志记录时，我在其中没有看到任何子html元素

---

我该怎么办？或者可能还有其他方法？

我自己解决了。解决方案：

我在我的组件中添加了

ChangeDetectorRef

，在设置innerHTML之后，我调用

detectChanges

方法

 this.formInnerHTML = this.sanitizer.bypassSecurityTrustHtml(response.htmlForm);
 this.changeDetector.detectChanges(); //Added

---

事实上，我不知道为什么有时候我要做这个

detectChanges

。如果有人知道，请解释。

这里说，

this.form.nativeElement.getElementsByTagName（'input'）[2]

未定义，这就是为什么无法处理单击。检查您是否调用了正确的输入类。

 this.formInnerHTML = this.sanitizer.bypassSecurityTrustHtml(response.htmlForm);
 this.changeDetector.detectChanges(); //Added