Problem with bind and Web SQL


#1

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>