Ionic 3中Reactive Form加载时<Ion-select>默认值不显示的解决方法

我之前也踩过这个Ionic 3里ion-select和Reactive Form配合的坑，确实挺闹心——明明表单值已经正确绑定了，但下拉框加载时就是空白，非得手动打开再关闭才会显示默认值，直接导致编辑/更新场景完全没法用，总不能单独写两套表单吧！下面给你几个亲测有效的临时解决方法，以及关于官方修复的说明：

临时解决方法 #

1. 手动触发ion-select视图更新（最常用） #

这个方法是通过ViewChild获取ion-select实例，在表单赋值完成后手动触发视图更新，强制它渲染选中值：

步骤1：组件类中引入ViewChild并定义实例

import { Component, ViewChild } from '@angular/core';
import { Select } from 'ionic-angular';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'page-login',
  templateUrl: 'login.html'
})
export class LoginPage {
  loginForm: FormGroup;
  @ViewChild('countrySelect') countrySelect: Select; // 绑定ion-select实例

  constructor(
    private formBuilder: FormBuilder,
    private settingsProvider: SettingsProvider,
    private lookupsProvider: LookupsProvider
  ) {}

  _buildForm() {
    this.loginForm = this.formBuilder.group({
      country_id: [this.settingsProvider.settings['USER_ID'], Validators.required],
      main_phone: ['', Validators.required],
      password: ['', Validators.required]
    });

    // 表单赋值后延迟触发视图更新，确保DOM已渲染完成
    setTimeout(() => {
      if (this.countrySelect) {
        this.countrySelect.value = this.loginForm.get('country_id').value;
        this.countrySelect._updateText(); // 调用Ionic内部方法更新显示文本
      }
    }, 100);

    this.loginForm.valueChanges.subscribe((v) => {
      console.log('Login loginForm.valueChanges: ', v);
    });
  }
}

步骤2：HTML中给ion-select添加模板引用

<ion-select #countrySelect name="country_id" formControlName="country_id">
  <ion-option *ngFor="let country of lookupsProvider.lookupData['countrys']" [value]="country.id">
    {{ optionText(country) }}
  </ion-option>
</ion-select>

2. 确保选项数据加载完成后再初始化表单 #

如果你的lookupsProvider.lookupData是异步加载的（比如从API获取），可能出现表单先初始化、但选项还没加载的情况，导致ion-select找不到对应值而显示空白。这时候要等选项数据就绪后再构建/赋值表单：

ngOnInit() {
  // 假设lookupsProvider有个异步加载数据的方法
  this.lookupsProvider.loadCountryData().then(() => {
    // 数据加载完成后再构建表单或赋值
    this._buildForm();
    // 或者如果表单已存在，用patchValue赋值
    // this.loginForm.patchValue({ country_id: this.settingsProvider.settings['USER_ID'] });
  });
}

3. 移除ion-option内的嵌套ion-item #

看你的代码里ion-option内部嵌套了ion-item，这在Ionic 3里是不符合规范的，可能导致渲染异常影响值匹配。直接把文本放在ion-option内即可：

<!-- 错误写法 -->
<ion-option>
  <ion-item> {{ this.optionText(country) }} </ion-item>
</ion-option>

<!-- 正确写法 -->
<ion-option *ngFor="let country of lookupsProvider.lookupData['countrys']" [value]="country.id">
  {{ optionText(country) }}
</ion-option>

关于官方修复时间的说明 #

这个是Ionic 3的已知bug，官方在后续的Ionic 4及以上版本中已经修复了这个问题，但Ionic 3早已停止维护，不会再有官方补丁发布。所以如果你还在维护Ionic 3项目，只能用上面的临时方法解决。

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