从打字稿访问基本输入字段

Question

这让我抓狂。

得到一个隐藏的输入框如下 <input type='hidden' id='iFrameDrivenImageValue' value='n/a'>

我正在尝试从 .ts 读取其值以提交到数据库。但无法编译TS。因如下错误而停止： ERROR in /Users/...component.ts (4773,89): Property 'value' does not exist on type 'HTMLElement'.

尝试过 <HTMLInputElement>document.getElementById("iFrameDrivenImageValue").value；

尝试过 <HTMLInputElement>document.getElementById("iFrameDrivenImageValue")?.value；

尝试过 theForm.form.controls['iFrameDrivenImageValue'].value；

当我使用 chrome 的调试器进行单步调试时，控制台没有出现任何问题，将document.getElementById("iFrameDrivenImageValue").value'n/a' 的值吐出。

我怎样才能让TS也看到同样的东西？或者至少让它冷静下来，这样我就可以编译该死的脚本了？

有人可能会问为什么不把香蕉放进盒子里并双向绑扎呢？好吧，我之所以采用这种米老鼠方式来尝试获取值，是因为 Angular 无法看到 ngForm 输入字段中的变化（当 iFrame 脚本更新该输入字段中的值时）。去搞清楚！

就 Angular 而言，ngForm 中 iframe 驱动/更改的值仍然是原始的，并且 theForm.form.controls 不知道其最近更新的值。

由于所有这些努力都失败了，我被迫尝试走老派的方式，但无法编译 TS。

Answer 1

考虑使用 @ViewChild 而不是 document.getElementById 通过将您的输入更改为：

<input #myInput type='hidden' id='iFrameDrivenImageValue' value='n/a'>

然后您可以从组件访问您的元素，如下所示：

@ViewChild('myInput') myInput;

ngOnInit() {
    console.log(this.myInput);
}