After saving, ionic storage does not rebind the values. Capacitor/Ionic 6-CodePudding

I'm storing and retrieving values with the Ionic storage plugin. I have a settings page from which the user can select. The app settings are accessible throughout the app.

This is my settings.page.html

<ion-header>
  <ion-toolbar >
    <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]="currencyChoice">Dollars</ion-select-option>
            <ion-select-option [value]="currencyChoice">Euros</ion-select-option>
            <ion-select-option [value]="currencyChoice">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]="unitChoice">Kilometers</ion-select-option>
            <ion-select-option [value]="unitChoice">Miles</ion-select-option>
          </ion-select>
        </ion-item>
      </ion-col>
    </ion-row>
  </ion-grid>
  <ion-button (click)="setConfig()">Save</ion-button>
</ion-content>

I use a select box from which the user can select.

This is my Settings.page.ts file:

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;
  unitChoice;

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

  ngOnInit() {
    this.getConfig();
  }

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

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

  getConfig() {

    this.currencyChoice = this.storage.get('currencyChoice').then((data) => {
      console.log(data, "init");
    });

    this.unitChoice = this.storage.get('unitChoice').then((data) => {
      console.log(data, "init");
    });
  }
}

When I select a value, the selected value appears in the console. When I restart the page, the selected values are visible in my console but not in the UI.

I have use this tutorial:

https://forum.ionicframework.com/t/how-to-store-config-values-in-ionic/119109/5

And this is the plugin I use:

https://github.com/ionic-team/ionic-storage

Summary:

Save - Works Getting the saved values - Works Seeing the saved values in the UI - Not working

How can I see the selected value in de ion-select component?

CodePudding user response：

you are saving the promise, not the value. change your getConfig function to this:

this.storage.get('currencyChoice').then((data) => {
      console.log(data, "init");
      this.currencyChoice = data;
    });

    this.storage.get('unitChoice').then((data) => {
      console.log(data, "init");
      this.unitChoice = data;
    });