I’ve been learning Ionic for the past week or so and for the most part am loving it. However I’ve bumped into an issue now which I have just not been able to get past.
The scenario is as follows: My app will connect to a URL and port number which is set by the user.
I have a SettingsProvider where I specify an AppSettings class which is created with the stored settings, this is then retrieved in the contrsuctor of the SettingsPage however the settings are never loaded when the page is opened. Both website_host and website_port are null. I have been able to verify that the data is stored as expected, the issue is just with getting the values when opening up the Settings page.
This is my SettingsProvider:
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import { Observable } from 'rxjs/Observable'
import 'rxjs/add/observable/of';
import { Storage } from '@ionic/storage';
export class AppSettings {
website_host: string = null;
website_port: number = null;
}
@Injectable()
export class SettingsProvider {
settings: AppSettings;
constructor(private http: Http, private storage: Storage) {}
public set(settingName,value){
return this.storage.set(`setting:${ settingName }`,value);
}
public async get(settingName){
return await this.storage.get(`setting:${ settingName }`);
}
public async remove(settingName){
return await this.storage.remove(`setting:${ settingName }`);
}
public clear() {
this.storage.clear().then(() => {
console.log('Storage cleared');
});
}
loadSettings(): Promise<boolean> {
return new Promise((resolve, reject) => {
var getPromises = [];
this.storage.ready().then(() => {
this.settings = new AppSettings();
for (var settingName in this.settings){
getPromises.push(this.storage.get(settingName).then((val) => { (this.settings[settingName] = val);}));
}
Promise.all(getPromises).then((data) => {
console.debug("Settings loaded", this.settings);
resolve(true);
});
})
.catch((error) => {
console.log('Error loading settings from storage', error);
});
});
}
getSettings(): Promise<AppSettings> {
return new Promise((resolve, reject) => {
this.loadSettings().then(() => {
resolve(this.settings);
});
});
}
}
And this is my SettingsPage:
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { SettingsProvider } from '../../providers/settings/settings'
@IonicPage()
@Component({
selector: 'page-settings',
templateUrl: 'settings.html',
})
export class SettingsPage {
website_host: string;
website_port: number;
constructor(private navCtrl: NavController, private navParams: NavParams, private settingsProvider: SettingsProvider) {
this.settingsProvider.getSettings().then((settings) =>{
console.debug('Loaded settings',settings);
});
}
public set(settingName,value){
return this.settingsProvider.set(`setting:${ settingName }`,value);
}
public async get(settingName){
return await this.settingsProvider.get(`setting:${ settingName }`);
}
public async remove(settingName){
return await this.settingsProvider.remove(`setting:${ settingName }`);
}
public clear() {
this.settingsProvider.clear();
}
public logStorageInfo() {
console.log(this.get('website_host'));
console.log(this.get('website_port'));
}
saveSettings(): void{
this.set('website_host', this.website_host);
this.set('website_port', this.website_port);
}
}
I know I could just something like the following in the SetttingsPage constructor, but I’m trying to keep the Page/Provider logic as separated as possible:
this.get('website_host').then((val) => {
this.website_host = val;
});
As I say, very new to Ionic so thanks in advance for any help, and of course any advice is appreciated! 