This is perhaps an AngularJS based question, but I hope someone here can guide me.
At the moment I am using SqlStorage and it’s working great. However, all of my query code is contained in the pages and I am trying to make it more modular. In my attempts to move my queries to a database ‘helper’ file, (setup as a provider in app.js) I think I am messing up 2-way databinding or promises.
For example. I have made a list of ‘people’ which are displayed in a list. If I use code below, I have direct control over the people array, and the ngFor works as it should. It automatically refreshes with no obvious UI reloading of the array. If I move this method off to another .js file however, I lose the ability to update the this.people array directly.
example.html
<ion-item (click)="addPerson()" *ngFor="#person of people">
{{person.id}} - {{person.firstname}} {{person.lastname}}
</ion-item>
example.js
export class TestPage {
static get parameters() {
return [[IonicApp], [NavController], [DBHelper]];
}
constructor(app, nav, db) {
this.app = app;
this.nav = nav;
this.db = db;
this.people = [];
this.storage = new Storage(SqlStorage);
this.refresh();
}
addPerson() {
this.storage.query("INSERT INTO people (firstname, lastname) VALUES ('Phillip', 'Hartin')").then((data) => {
console.log(JSON.stringify(data.res));
}, (error) => {
console.log(JSON.stringify(error.err));
});
}
refresh() {
this.storage.query("SELECT * FROM people").then((data) => {
this.people = [];
if (data.res.rows.length > 0) {
for (var i = 0; i < data.res.rows.length; i++) {
let person = data.res.rows.item(i);
this.people.push({id: person.id, firstname: person.firstname, lastname: person.lastname});
}
}
}, (error) => {
console.log("ERROR -> " + JSON.stringify(error.err));
});
}
I attempted to move this method over to db-helper.js as I did with the addPerson() methods, but I cant seem to properly pass back the new array to the Page (see below):
New Refresh Method in example.js
refresh() { this.people = []; this.people = this.db.getAllPeople(); }
db-helper.js
getAllPeople() {
return this.storage.query("SELECT * FROM people").then((data) => {
let people = [];
if (data.res.rows.length > 0) {
for (var i = 0; i < data.res.rows.length; i++) {
let person = data.res.rows.item(i);
people.push({id: person.id, firstname: person.firstname, lastname: person.lastname});
}
return people;
}
}, (error) => {
console.log("ERROR -> " + JSON.stringify(error.err));
});
}
I should note, that by stepping through the code I can see the getAllPeople() method runs as it should, and the query works as it should, but it doesnt seem to be passing the data back to the page that called it. I feel like I’ve skipped something fundamental about Angular.
Thanks for your time!