Having recently ventured into the world of Ionic framework development, I have encountered a puzzling issue. At runtime, an array inexplicably gets nulled and I am struggling to pinpoint the root cause.
export interface Days
{
name:string;
}
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage
{
days = [] as Days[];
constructor(public navCtrl: NavController, public alertCtrl: AlertController, public navParams: NavParams)
{
}
presentDayDialog(): void
{
let alert = this.alertCtrl.create({
title: 'Add new day',
message: 'Enter a name for the new day',
inputs: [
{
name: 'day',
placeholder: 'Day'
},
],
buttons: [
{
text: 'Cancel',
handler: () => {
console.log('Cancel clicked');
}
},
{
text: 'Save',
handler: data => {
this.addDays(data.day);
}
}
]
});
alert.present();
}
addDays(rname): void
{
this.days.push({name: rname});
}
itemTapped(Days)
{
this.navCtrl.push(RoutinePage, {
pageName: Days.name
});
console.log("The page name was "+Days.name);
}
}
export interface Routine
{
name:string;
weight: number;
reps: number;
}
@Component({
selector: 'page-routine',
templateUrl: 'routine.html'
})
export class RoutinePage
{
routines = [] as Routine[];
public pageName;
constructor(public navCtrl: NavController, public toastCtrl: ToastController, public alertCtrl: AlertController, public platform: Platform, public storage: Storage, public navParams: NavParams)
{
console.log('PRE CONSTRUCTOR ' + this.routines);
this.pageName = navParams.get("pageName");
this.getRoutines();
console.log('POST CONSTRUCTOR ' + this.routines);
}
//Sets the routines to storage
setRoutines()
{
console.log('ROUTINES ARRAY before setRoutine() '+ this.routines );
this.storage.set(this.pageName, this.routines );
console.log('ROUTINES ARRAY after setRoutine() '+ this.routines );
}
//Gets the routines from storage, this gets executed at the construction of this page so it isn't empty at the start
getRoutines()
{
console.log('ROUTINES ARRAY before getRoutine() '+ this.routines );
this.routines = [{name: 'Jogger', weight: 0, reps: 0}];
this.storage.get(this.pageName).then((data) => {
this.routines = data;
});
console.log('ROUTINES ARRAY after getRoutine() '+ this.routines );
}
//Adds a new routine and saves it to storage
addRoutine(rname): void
{
console.log('ROUTINES ARRAY before addRoutine() '+ this.routines );
this.routines.push({name: rname, weight: 0, reps: 0});
console.log('ROUTINES ARRAY after addRoutine() ' + this.routines);
this.setRoutines();
}
//Presents the dialog for adding a new routine on FAB-button-press, calls addRoutine function
presentRoutineDialog(): void
{
let alert = this.alertCtrl.create({
title: 'Add new routine',
message: 'Enter a name for the new routine',
inputs: [
{
name: 'routine',
placeholder: 'Routine'
},
],
buttons: [
{
text: 'Cancel',
handler: () => {
console.log('Cancel clicked');
}
},
{
text: 'Save',
handler: data => {
console.log('ROUTINES ARRAY AFTER SAVE BUTTON PRESS:' +this.routines);
this.addRoutine(data.routine);
}
}
]
});
console.log('ARRAY BEFORE ALERT: ' + this.routines);
alert.present();
console.log('ARRAY AFTER ALERT: ' + this.routines);
}
}
My approach involves adding items (Days) to a list on the "first" page. When clicking on an item, a second page opens with the Day's name becoming the name of the page. This name acts as the key for storing the array in the device's storage. Each page has its own storage to display information upon construction.
THE ISSUE: For some reason, the routines Array becomes null during runtime, except when the name of the clicked day on the first page is empty. This anomaly seems related to my unconventional storage system, but I'm unable to identify the exact culprit.
The page name was Upper Body home.ts:63:4
PRE CONSTRUCTOR routine.ts:28:4
ROUTINES ARRAY before getRoutine() routine.ts:46:4
ROUTINES ARRAY after getRoutine() [object Object] routine.ts:51:4
POST CONSTRUCTOR [object Object] routine.ts:32:4
ARRAY BEFORE ALERT: null routine.ts:91:4
ARRAY AFTER ALERT: null routine.ts:93:4
ROUTINES ARRAY AFTER SAVE BUTTON PRESS:null routine.ts:85:12
ROUTINES ARRAY before addRoutine() null
After the constructor completes, the array suddenly becomes null. What could be causing this? I need fresh insight to overcome this challenge.