Angular select组件初始值1秒后丢失问题求助

可能的原因及对应解决方案： #

1. 国家列表数据加载时机滞后

如果Countries是异步加载的（比如从后端接口获取），会出现表单先初始化、但下拉选项还没渲染的情况。等列表加载完成重新渲染时，若初始值和选项中的值匹配不上，就会自动跳转到null选项。

解决方法：
确保在国家列表加载完成后再初始化表单：

// 示例：从服务获取国家列表后再创建表单
this.countryService.getCountries().subscribe(countries => {
  this.Countries = countries;
  // 初始化表单
  this.profileForm = new UntypedFormGroup({
    // ...其他表单控件
    countryCode: new UntypedFormControl(this.user.countryCode, Validators.required)
  });
});

如果表单必须提前创建，也可以在列表加载完成后手动赋值：

this.countryService.getCountries().subscribe(countries => {
  this.Countries = countries;
  // 校验初始值是否存在于选项中，存在则赋值
  const hasMatch = countries.some(country => country.countryCode === this.user.countryCode);
  if (hasMatch) {
    this.profileForm.patchValue({ countryCode: this.user.countryCode });
  }
});

2. 值的类型不匹配

user.countryCode和country.countryCode的类型不一致（比如一个是数字、一个是字符串），会导致Angular无法匹配选项，最终显示null。

解决方法：
统一两者的类型，比如把初始值转成和选项一致的类型：

// 示例：如果country.countryCode是字符串，把user的countryCode转成字符串
countryCode: new UntypedFormControl(String(this.user.countryCode), Validators.required)

3. 初始值被异步操作覆盖

检查组件中是否有其他异步逻辑（比如用户数据的后续更新）修改了user.countryCode或表单控件的值。

排查方法：
监听表单控件的值变化，定位修改时机：

this.profileForm.get('countryCode')?.valueChanges.subscribe(val => {
  console.log('countryCode 值变化:', val);
});

通过日志可以看到值什么时候变成null，进而找到对应的修改逻辑。

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