>目标：在TypeScript中获取HTML元素的值(Angular(
问题：错误：未捕获(在承诺中(：类型错误：无法读取 null 的属性"值">
类型错误： 无法读取 null 的属性"值" at UserRegistration2Component.push../src/user-registration-2.component.ts.UserRegistration2Component.getTranslations (user-registration-2.component.ts：649( at UserRegistration2Component.push../src/user-registration-2.component.ts.UserRegistration2Component.createForm (user-registration-2.component.ts：509( at new UserRegistration2Component (user-registration-2.component.ts：484(
第 649 行的代码：
this.spanishHidden = (<HTMLInputElement>document.getElementById("hiddenInputLs")).value;
背景/我尝试过的内容：我已经在其他数十个组件/页面上做了同样的事情，没有问题。我不确定为什么我突然遇到这个错误。我尝试将隐藏的输入元素移动到 html 的不同部分，但它并没有改变结果。(注意：它是隐藏的，因为我使用 i18n 进行翻译，不希望这些项目显示在页面上。同样，我已经在其他几十个页面上成功地完成了此操作(我还尝试重命名 ID 并复制粘贴它们以确保没有某种拼写错误或重复，但仍然是相同的错误。 我在这里查看了解决方案并尝试了各种可能性，但我仍然收到错误(为什么在使用getElementById时出现"类型错误：无法读取null的属性'值'"？我是否缺少语法之类的小东西？
HTML：
<mat-card class="login-card">
<mat-card-title class="text-center" i18n="@@Something_H1_1">
New User Registration
</mat-card-title>
<mat-card-subtitle class="text-center" i18n="@@Something_H1_2">
Step 1 of 4
</mat-card-subtitle>
<mat-card-content>
<input placeholder="Spanish" id="hiddenInputLs" i18n-value="@@Something_H1_30" value="Spanish" [hidden]="true">
<input placeholder="English" id="hiddenInputLe" i18n-value="@@Something_H1_31" value="English" [hidden]="true">
<form [formGroup]="_userRegForm2" (ngSubmit)="cmdRegisterUser_click()" novalidate>
<div fxLayout fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="30px" class="columns">
// more code here......
</div>
</form>
打字稿：
createForm()
{
this.getTranslations();
this.languages = [
{ value: 'English', viewValue: this.englishHidden },
{ value: 'Spanish', viewValue: this.spanishHidden }
];
}
getTranslations() {
this.spanishHidden = (<HTMLInputElement>document.getElementById("hiddenInputLs")).value;
this.englishHidden = (<HTMLInputElement>document.getElementById("hiddenInputLe")).value;
}
我建议看几件事：
- 永远不要直接查看 DOM，更喜欢使用 Angular 提供的接口，如 Renderer 或 ViewChild。
- 根据从视图中调用方法的位置，
getTranslations可能尚未呈现。如果从组件构造函数或 ngOnInit 钩子调用，则尚未创建元素。 - 切勿直接访问搜索方法 (getElementById( 的值，因为该元素可能不可用，并且 JS 引擎会抛出错误，因为它试图访问 null 变量的属性，最后会退出堆栈执行并且您的应用程序会遇到问题。最好在访问其属性之前检查元素是否存在。
- 似乎在模板中，英语输入行在它的末尾有一些东西 。
让我知道在尝试了这几个步骤后是否仍然无法提取值。
我不得不把它放在ngAfterViewInit((中。老实说，我不确定为什么这在没有ngAfterViewInit的所有其他页面上都有效。但这就是我所做的：
ngAfterViewInit() {
this.getTranslations();
}