SQLite插件和Ionic Framework在实际设备上不起作用

Question

我有一个简单的应用程序，需要存储名称和电子邮件。
我已经安装了<div class="chat-right"> <div class="fileUploadWrap"> <input type="file" name="file" class="form-control" id="hidden_upload_file_chatting"> </div> <button type="submit" class="btn btn-flat" name="reply" value="reply" >Reply</button> <button type="button" class="btn btn-flat" data-dismiss="modal" style="margin-left: 10px !important;">Close</button> </div>：

cordova-sqlite-storage

，并且可以在模拟器上正常运行。
当我使用以下命令将其部署到设备上后：

ionic cordova plugin add cordova-sqlite-storage

我得到：

ionic cordova run android --device

这是我的“ home.ts”

plugin_not_installed  

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'executeSql' of undefined
TypeError: Cannot read property 'executeSql' of undefined
    at main.js:443
    at new t (polyfills.js:3)
    at UsersProvider.webpackJsonp.56.UsersProvider.getTotalUser (main.js:442)
    at main.js:164
    at t.invoke (polyfills.js:3)
    at Object.onInvoke (vendor.js:5085)
    at t.invoke (polyfills.js:3)
    at r.run (polyfills.js:3)
    at polyfills.js:3
    at t.invokeTask (polyfills.js:3)
    at c (polyfills.js:3)
    at c (polyfills.js:3)
    at polyfills.js:3
    at t.invokeTask (polyfills.js:3)
    at Object.onInvokeTask (vendor.js:5076)
    at t.invokeTask (polyfills.js:3)
    at r.runTask (polyfills.js:3)
    at o (polyfills.js:3)
    at e.invokeTask (polyfills.js:3)
    at i.isUsingGlobalCallback.invoke (polyfills.js:3)

这是提供者：

import { UsersProvider } from './../../providers/users/users';
import { SyncPage } from './../sync/sync';
import { Component } from '@angular/core';
import { NavController, AlertController, LoadingController, ModalController, Platform } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  newUser: any = {
    first_name: '',
    last_name: '',
    email: '',
    gdpr: false
  };

  totalRegistered: number =  0;
  lastSync = 'mai';
  loading = null;

  constructor(
    public navCtrl: NavController,
    private alertCtrl: AlertController,
    private loadingCtrl: LoadingController,
    private modalCtrl: ModalController,
    private platform: Platform,
    private userProvider: UsersProvider
  ) {}

  ionViewDidLoad() {
    this.platform.ready().then(()=>{

      this.userProvider.getTotalUser().then((data)=>{
        this.totalRegistered = data;
      });
    });

  }

  add() {
      this.loading = this.loading = this.loadingCtrl.create({
        content: 'Registrazione in corso',
        enableBackdropDismiss: true
      });

      this.loading.present();

      this.userProvider.addUser(this.newUser).then((data) =>{
        var message = 'Non è stato possibile aggiungere l\'utente.';
        if(data){
          message = "Utente aggiunto correttamente";
          this.totalRegistered++;
        }

        this.loading.dismiss();
        this.alertCtrl.create({
          message: message,
          buttons: ['Ok']
        }).present();

        this.clear();
      });
  }

  clear() {
    this.newUser.first_name = '';
    this.newUser.last_name = '';
    this.newUser.email = '';
    this.newUser.gdpr = false;
  }

  onOpenSync(){
    this.modalCtrl.create(SyncPage).present();
  }

  checkEmail() {

    let regex = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;

    if (this.newUser.email.length > 0 && !regex.test(this.newUser.email)) {

      this.alertCtrl.create({
        message: "L'indirizzo email non è valido.",
        buttons: ['Ok']
      }).present();
    }
  }
}

在这里安装了插件：

import { Injectable } from '@angular/core';
import { SQLite, SQLiteObject } from '@ionic-native/sqlite';

@Injectable()
export class UsersProvider {

  public db: SQLiteObject;

  constructor(private sqlite: SQLite) {
    this.sqlite.create({
      name: 'apritimoda.db',
      location: 'default'
    }).then((db: SQLiteObject) => {
      this.db = db;
      db.executeSql('create table if not exists users(id INTEGER PRIMARY KEY AUTOINCREMENT, first_name VARCHAR(64), last_name VARCHAR(64), email VARCHAR(64), gdpr INT(1), synced INT(1) DEFAULT 0 )', [])
          .then(() => console.log('Executed SQL'))
          .catch(e => console.log(e));
    }).catch(e => {
      console.log('DB non trovato: -->' + e);
    })
  }

  findUser(email:string){
    return new Promise<Boolean>((resolve, reject) => {
      this.db.executeSql('SELECT email FROM users WHERE email=?', [email])
      .then(res => {
        var found = true;
        if(res.rows.length == 0){
          found = false;
        }
        console.log('AM: utente esiste? '+found);
        resolve(found);
      })
      .catch(e => {
        console.log('AM: errore verifica email');
        reject(e);
      })
    });
  }

  addUser(user:any){
    return new Promise((resolve,reject) =>{
      this.findUser(user.email).then((userExists) =>{
        if(!userExists){
          this.db.executeSql('INSERT INTO users (id, first_name, last_name, email, gdpr) VALUES (NULL, ?,?,?,?)', [
            user.first_name,
            user.last_name,
            user.email,
            user.gdpr,
          ])
          .then(res => {
            console.log('AM: utente aggiunto');
            resolve(true);
          })
          .catch(e => {
            console.log(e);
            console.log('AM: errore creazione utente');
            reject(false);
          })
        }
      });
    });
  }

  getTotalUser(){
    return new Promise<number>((resolve,reject)=>{

      this.db.executeSql('SELECT count(id) as total FROM users', [])
        .then(res => {
          var totalRegistered = 0;
          if(res.rows.legth != 0){
            totalRegistered = res.rows.item(0).total;
          }
          resolve(totalRegistered);
        })
        .catch(e =>{
          console.log('AM: Errore ->'+ JSON.stringify(e));
          reject(e);
        });
    });
  }

  getUserToSync(){

    return new Promise<any[]>((resolve, reject) => {
      this.db.executeSql('SELECT * FROM users WHERE synced = 0', [])
        .then(res => {
          var contacts = []
          if(res.rows.length > 0){
            for(var i=0; i<res.rows.length; i++) {
              contacts.push({
                id:res.rows.item(i).id,
                first_name:res.rows.item(i).first_name,
                last_name:res.rows.item(i).last_name,
                email:res.rows.item(i).email,
                gdpr:res.rows.item(i).gdpr,
              });
            }
          }
          resolve(contacts);

        })
        .catch(err => {
          console.log('Error: '+err);
          reject(err)
        })
    })

  }

  markAsSynced(ids){

    if(ids.length > 0) {
      var prepareQuery = "UPDATE users SET synced=1 WHERE id IN ("+this.prepareQuery(ids.length)+")";
      this.db.executeSql(prepareQuery, ids)
      .then(res => {
        console.log(JSON.stringify(res));
      })
      .catch(e => {
        console.log(JSON.stringify(e));
      });
    }
  }

  prepareQuery(ids){
    var placeholders = [];
    for(var i=0; i<ids; i++){
      placeholders.push('?');
    }

    return placeholders.join();
  }
}

看起来像在<plugin name="cordova-plugin-whitelist" spec="1.3.3" /> <plugin name="cordova-plugin-statusbar" spec="2.4.2" /> <plugin name="cordova-plugin-device" spec="2.0.2" /> <plugin name="cordova-plugin-splashscreen" spec="5.0.2" /> <plugin name="cordova-plugin-ionic-webview" spec="^3.0.0" /> <plugin name="cordova-plugin-ionic-keyboard" spec="^2.0.5" /> <plugin name="cordova-plugin-network-information" spec="2.0.1" /> <plugin name="cordova-sqlite-storage" spec="3.2.0" /> <engine name="android" spec="7.1.4" /> 的{​​{1}}函数中创建数据库之前调用了getTotalUser。

我想念什么？

Answer 1

您以这种方式安装插件吗？

$ ionic cordova plugin add cordova-sqlite-storage
$ npm install @ionic-native/sqlite

然后尝试此代码

export class UsersProvider {

public db: SQLiteObject;

constructor(private sqlite: SQLite) {
    platform.ready().then(() => {
        StatusBar.styleDefault();
        let db = new SQLite();
        db.openDatabase({
            name: "data.db",
            location: "default"
        }).then(() => {
            db.executeSql("CREATE TABLE ....)", {}).then((data) => {
                console.log("TABLE CREATED: ", data);
            }, (error) => {
                console.error("Unable to execute sql", error);
            })
        }, (error) => {
            console.error("Unable to open database", error);
        });
    });
}

}

Answer 2

在app.module.ts中调用数据库创建

在提供程序中添加以下功能

createAndOpenDb(){
 this.sqlite.create({
      name: 'apritimoda.db',
      location: 'default'
    }).then((db: SQLiteObject) => {
      this.db = db;
      db.executeSql('create table if not exists users(id INTEGER PRIMARY KEY AUTOINCREMENT, first_name VARCHAR(64), last_name VARCHAR(64), email VARCHAR(64), gdpr INT(1), synced INT(1) DEFAULT 0 )', [])
          .then(() => console.log('Executed SQL'))
          .catch(e => console.log(e));
    }).catch(e => {
      console.log('DB non trovato: -->' + e);
    })
}

然后在app.module.ts

中调用该函数

userProvider.createAndOpenDb()