Ionic 4 ion-select默认选项设置后不显示问题求助

我之前在Ionic 4 beta后期到rc2版本也碰到过这个一模一样的问题！你完全没操作错，核心问题确实是赋值顺序导致的，而且这是那个版本的一个小坑。

问题原因 #

你当前的代码是先给selectedMeasureSetId赋值，之后才把接口返回的结果赋值给measureSets数组。这时候Ionic的ion-select已经完成了初始渲染：因为初始化时measureSets是空的，控件找不到对应selectedMeasureSetId的选项，所以只显示下拉箭头；而弹窗是在你点击时才去遍历measureSets匹配选中值，所以能正常显示选中状态。

解决方案 #

这里有几种靠谱的解决办法，按优先级推荐：

1. 调整赋值顺序（最简单有效）

先把接口结果赋值给measureSets，再设置selectedMeasureSetId。这样当你设置选中值时，选项列表已经存在，ion-select能立刻匹配到对应的选项并渲染文本：

ngOnInit() {
  this.measureSetsApiService.query().pipe(take(1)).subscribe(result => {
    this.measureSets = result; // 先加载选项列表
    // 可选链操作符避免find返回undefined报错
    this.selectedMeasureSetId = result.find(i => i.isDefault)?.measureSetId || 1; 
  });
}

2. 手动触发变更检测

如果因为业务逻辑不能调整赋值顺序，可以引入Angular的ChangeDetectorRef手动触发视图更新，让控件重新匹配选中值和选项：

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';

// 构造函数注入ChangeDetectorRef
constructor(private cdr: ChangeDetectorRef) {}

ngOnInit() {
  this.measureSetsApiService.query().pipe(take(1)).subscribe(result => {
    this.selectedMeasureSetId = result.find(i => i.isDefault)?.measureSetId || 1;
    this.measureSets = result;
    this.cdr.detectChanges(); // 强制更新视图
  });
}

3. 延迟渲染ion-select

给ion-select加个*ngIf，确保选项列表加载完成后再渲染控件，从根源避免初始化时无选项的情况：

<ion-select 
  *ngIf="measureSets?.length"
  name="measureSetSelect" 
  [(ngModel)]="selectedMeasureSetId"
>
  <ion-select-option *ngFor="let measureSet of measureSets" [value]="measureSet.measureSetId">
    {{measureSet.name}}
  </ion-select-option>
</ion-select>

补充说明 #

这个问题在Ionic 4正式版之后已经被修复了，但rc2作为候选版本确实存在这个视图更新的小bug。你可以优先试试第一种方法，调整赋值顺序就能解决90%的这类问题~

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