I have the following Load() method working but I would like to write something less repetitive and compact when loading several user options…
//
import { Injectable } from '@angular/core' // 20170515
import { Storage } from '@ionic/storage' // 20170515
//
@Injectable()
// 20170515
export class UserOptionsService {
//
constructor(
public Storage: Storage
) {
console.log("UserOptionsService------------>>Created");
// TODO: how to handle this correctly since services are not expected to deal directly with views?
// if page is destroyed like browser refresh, tab closed, etc...
window.addEventListener('beforeunload', () => {
this.Save();
return false;
});
}
//----------------------------------------------------------------------
KeepMediaPlaying: boolean = true;
ContinuousPlaying: boolean = true;
PlayWhileHidden: boolean = true;
...
Load() {
console.log("UserOptionsService------------>>Load");
this.Storage.ready().then(() => {
this.Storage.get("KeepMediaPlaying").then((data) => {
this.KeepMediaPlaying = data;
console.log("UserOptionsService<<------------Storage.get ", data);
})
.catch(() => {
console.log("UserOptionsService------------>>Load DEFAULTS");
this.KeepMediaPlaying = true;
});
this.Storage.get("ContinuousPlaying").then((data) => {
this.ContinuousPlaying = data;
console.log("UserOptionsService<<------------Storage.get ", data);
})
.catch(() => {
console.log("UserOptionsService------------>>Load DEFAULTS");
this.ContinuousPlaying = false;
});
});
}
So I attempted to factor out the Storage.get like the following:
private StorageGet(Key: string, Default: any): any {
this.Storage.get(Key).then((data) => {
console.log("UserOptionsService<<------------Storage.get ", Key, data);
return (data);
})
.catch(() => {
console.log("UserOptionsService------------>>Load DEFAULTS", Default);
return Default;
});
}
and call my StorageGet() like so
Load() {
console.log("UserOptionsService------------>>Load");
this.Storage.ready().then(() => {
this.KeepMediaPlaying = this.StorageGet("KeepMediaPlaying", true);
this.ContinuousPlaying = this.StorageGet("ContinuousPlaying", true);
this.PlayWhileHidden = this.StorageGet("PlayWhileHidden ", false);
});
}
However, after the change above, when I enter my settings view of toggles they do not reflect the loaded values from storage until the second visit.
I don’t know how to to apply the Promise.All( …) to my case.
Can you please assist me in coding the “promises/resolve” correctly? Just when I think I understand them, they bite me again, I am lost 
The view component does just the following
// 20170515
ionViewWillEnter() {
console.log("UserOptions<<------------ionViewWillEnter");
this.UserOptionsService.Load();
}
// 20170515
ionViewDidLeave() {
console.log("UserOptions<<------------ionViewDidLeave");
this.UserOptionsService.Save();
}
and the view html (template) looks like this:
<ion-item>
<ion-label>Keep Media Playing</ion-label>
<ion-toggle [(ngModel)]="UserOptionsService.KeepMediaPlaying"></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Continuous Playing</ion-label>
<ion-toggle [(ngModel)]="UserOptionsService.ContinuousPlaying"></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Play While Hidden</ion-label>
<ion-toggle [(ngModel)]="UserOptionsService.PlayWhileHidden"></ion-toggle>
</ion-item>
Thank you.
** NOTE: ** every app developer will sooner or later deal with storage, if you happen to know of a pattern, starter or template, we could all follow it, it would cut on the noise multi posts such trivial topics generate. By all means, please include a link.
While I wait for the darn pizza to be prepared…
How do I capture ALL promises?
When ALL promises are resolved, how do I tell the view to refresh itself?
- via posting an event from the service to the page?
- how will the view refresh its toggles controls upon subscribe to such an event?
- Isn’t ngModel in the view supposed to take care of that?
Thanks.
)
