angularjs 如何在TypeScript中使用document.getElementById()方法?

62o28rlo  于 2023-03-07  发布在  Angular
关注(0)|答案(5)|浏览(222)

我试图重置HTML表单,以清除输入字段中使用的所有值;

document.getElementById('myForm').reset();

但是我可以在 typescript 中使用它,它给我一个错误,说document.getElementById('myForm') may be null
我该如何解决这个问题?

hfsqlsce

hfsqlsce1#

如果使用strictNullChecks选项,则Typescript将强制您检查该值是否不为空(或包含strictNullChecksstrict)。您可以执行测试或使用非空Assert(!).此外,您还需要使用类型Assert来Asserthtml元素是HTMLFormElement,因为默认情况下它只是HtmlElement,并且reset是存在的仅限HTMLFormElement
只是一个AssertAssert:

(document.getElementById('myForm') as HTMLFormElement).reset();

带检查的Assert(推荐):

let form = document.getElementById('myForm')
if(form) (form as HTMLFormElement).reset();

非空Assert(如果只想访问HtmlElement成员):

document.getElementById('myForm')!.click()
agyaoht7

agyaoht72#

对此有不同的修复方法。您可以编辑tsconfig.json并添加

"strictNullChecks": false

这将禁用严格的空值检查。
如果您绝对确定元素存在,还可以使用!告诉typescript您的id将始终存在

document.getElementById('myForm')!.reset();

或者,如果您希望确保永远不会因为元素确实不存在而出现错误,请检查它是否存在

const el = document.getElementById('myForm');
if (el) el.reset();
wz3gfoph

wz3gfoph3#

尝试使用如下类型:

const myForm = <HTMLElement>document.getElementById('myForm')
if(myForm ) myForm.reset();
f0brbegy

f0brbegy4#

只需使用以下语法即可&它会起作用:
document.getElementById('myForm')!

eqzww0vc

eqzww0vc5#

尝试检查元素。如下所示:

var myForm = document.getElementById('myForm');
if(myForm) myForm.reset();

相关问题