Angular 11 无法将localStorage值显示到输入框问题求助

• 错误绑定属性：input元素没有innerHtml属性用来控制输入框展示内容，且你已经使用了响应式表单的formControlName绑定控件，额外加冗余绑定反而会干扰表单值的同步逻辑。
• 类型转换异常：localStorage.getItem如果未取到对应key的值会返回null，parseInt(null)会得到NaN，给表单控件设置NaN自然无法展示正确数值。
• 赋值时机错误：如果在formValueWebinar这个FormGroup实例初始化完成前就调用setValue方法，赋值会失败，值无法同步到输入框。

1. 修正HTML代码，删除多余的[innerHtml]绑定，响应式表单会自动同步formControl的值到关联的输入框：

<mat-form-field class="webinarTitleInput " appearance="outline">
  <mat-label class="font">Enter User ID</mat-label>
  <input type="text" matInput placeholder="User ID" formControlName="user_id">
</mat-form-field>

2. 优化TS端的取值和赋值逻辑，添加空值校验，确保表单实例已初始化完成再赋值：

// 读取localStorage值加兜底逻辑
const storedId = localStorage.getItem('some-key');
this.additionalID = storedId ? parseInt(storedId) : 0; // 0可替换为你需要的默认空值
// 校验表单控件存在后再赋值
if (this.formValueWebinar?.get('user_id')) {
  this.formValueWebinar.get('user_id').setValue(this.additionalID);
}

3. 确认FormGroup初始化逻辑的执行顺序早于赋值逻辑，确保user_id控件已被正确声明：

// 示例FormGroup初始化代码，需放在赋值操作之前执行
this.formValueWebinar = this.fb.group({
  user_id: [''], // 必须声明对应的user_id控件
  // 其余表单控件声明
});

内容的提问来源于stack exchange，提问作者reginald bollosa