Hello,
I have the following problem when binding a Web SQL query: the first time the function “load” is triggered the result is assigned to a variable, but the view does not render. The second time the same function is triggered the view renders. This happens even if the bind is done with a manual Array, not coming from the query. This problem reminds me of the “$apply” of Angular 1, to apply a result.
Follow the code:
Users.ts
import { Component } from '@angular/core';
import { NavController, ModalController, Platform } from 'ionic-angular';
const win: any = window;
@Component({
templateUrl: 'users.html'
})
export class UsersPage {
db: any;
users: any;
constructor(
public navCtrl: NavController,
public modalCtrl: ModalController) {
this.db = win.openDatabase('database', '1.0', 'database', 5 * 1024 * 1024);
}
load() {
this.db.transaction((tx) => {
tx.executeSql('SELECT * FROM users', [], (tx, rs) => {
this.users = rs.rows;
}, (tx, error) => {
console.log('SELECT error: ' + error.message);
});
});
}
}
Users.html
<ion-content padding>
<button (click)="load()">Load</button>
<ion-list>
<button ion-item *ngFor="let user of users">
{{user.name}}
</button>
</ion-list>
</ion-content>