Ionic 6/Capacitor存储值后UI未绑定问题求助

使用Ionic Storage存储配置值，保存和读取功能正常（控制台能打印存储的数值），但重启页面后ion-select组件无法显示已选值，UI绑定失效。

问题原因分析 #

1. ion-select-option的value绑定错误
   原代码中所有选项的[value]都绑定了组件的变量（如currencyChoice），导致所有选项的value值与当前组件变量同步，而非固定的选项文本值（如"Dollars"），无法形成正确的选项匹配。

2. Promise处理逻辑错误
   storage.get()返回的是Promise对象，原代码直接将Promise赋值给currencyChoice和unitChoice，而非Promise resolve后的实际数据，导致ngModel无法识别正确的选中值。

修正后的代码 #

settings.page.html #

<ion-header>
  <ion-toolbar class="app-theme-color">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>Settings</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-grid>
    <ion-row>
      <ion-col>
        <ion-item>
          <ion-label>Currency</ion-label>
          <ion-select [(ngModel)]="currencyChoice">
            <ion-select-option value="Dollars">Dollars</ion-select-option>
            <ion-select-option value="Euros">Euros</ion-select-option>
            <ion-select-option value="Pounds">Pounds</ion-select-option>
          </ion-select>
        </ion-item>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <ion-item>
          <ion-label>Unit</ion-label>
          <ion-select [(ngModel)]="unitChoice">
            <ion-select-option value="Kilometers">Kilometers</ion-select-option>
            <ion-select-option value="Miles">Miles</ion-select-option>
          </ion-select>
        </ion-item>
      </ion-col>
    </ion-row>
  </ion-grid>
  <ion-button (click)="setConfig()">Save</ion-button>
</ion-content>

settings.page.ts #

import { Component, OnInit } from '@angular/core';
import { Storage } from '@ionic/storage-angular';

@Component({
  selector: 'app-settings',
  templateUrl: './settings.page.html',
  styleUrls: ['./settings.page.scss'],
})
export class SettingsPage implements OnInit {

  currencyChoice: string;
  unitChoice: string;

  constructor(private storage: Storage) {
    this.init();
  }

  async ngOnInit() {
    await this.getConfig();
  }

  async init() {
    await this.storage.create();
  }

  async setConfig() {
    await this.storage.set('currencyChoice', this.currencyChoice);
    await this.storage.set('unitChoice', this.unitChoice);
    console.log(this.unitChoice);
  }

  async getConfig() {
    // 读取存储值，若无数据则设置默认值
    this.currencyChoice = await this.storage.get('currencyChoice') || 'Dollars';
    this.unitChoice = await this.storage.get('unitChoice') || 'Kilometers';
    console.log(this.currencyChoice, this.unitChoice, "init");
  }
}

关键修正点 #

• 给ion-select-option设置固定的value值，与选项文本对应
• 使用async/await处理storage.get()的Promise，确保变量被赋值为实际存储的数据
• 为变量添加类型声明，提升代码严谨性
• 设置默认值，避免首次加载页面时select组件为空

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