Ionic 保存后,离子存储不会重新绑定值,电容器/离子6

ltqd579y  于 2022-12-08  发布在  Ionic
关注(0)|答案(1)|浏览(280)

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 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]="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?

ql3eal8s

ql3eal8s1#

您正在保存承诺,而不是值。请将getConfig函数更改为:

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;
    });

相关问题