TypeError:无法读取undefined的属性'executeSql'

时间:2017-11-06 11:24:11

标签: angular sqlite typescript ionic3

我有一个 SQLite提供程序(“ DatabaseProvider ”),其中包含一些读写方法(“ insertActivity “和” getData “)。

当我调用 insertActivity()方法时,一切顺利; 但是当我调用 getData()时,它会给我这个错误:

  

错误:TypeError:无法读取未定义的属性'executeSql'

我无法理解为什么,因为我认为方法是相同的和.ts文件,我也称之为。

这是我的 database.ts

import { Injectable } from '@angular/core';
import { SQLite, SQLiteObject } from '@ionic-native/sqlite';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class DatabaseProvider {
  // private storage:  SQLite;
  public db:       SQLiteObject;
  public isOpen:   boolean;
  public storage:  any;

  constructor(
    public http:      Http,
    public database:  SQLite,

  ) {

    if (!this.isOpen) {
        // create db and tables

          this.database = new SQLite();
          this.database.create({name: 'RLSDB', location: 'default'})
          .then((db: SQLiteObject) => {
            this.storage = db;
            db.executeSql('create table if not exists LOGIN (id INTEGER PRIMARY KEY AUTOINCREMENT, sid TEXT, username TEXT, password TEXT, email TEXT, timestamp TEXT)', {}).then((data) => {
              this.isOpen = true;
              console.log('TABLE CREATED: ', data);
            }, (error) => {
              console.error("Unable to execute sql", error);
            });
          }).then(() => {
            this.storage.executeSql('create table if not exists ACTIVITIES (id INTEGER PRIMARY KEY AUTOINCREMENT, activity_name TEXT, activity_datetime TEXT)', {});
            this.isOpen = true;
          }
        );
    }
  }

  public getData() {

    return new Promise((resolve, reject) => {
      this.storage.executeSql('SELECT * from ACTIVITIES', []).then((data) => {
        let activityValues = [];
        if (data.rows.length > 0) {
          for(let i=0; i <data.rows.length; i++) {
            activityValues.push(data.rows.item(i).activity_datetime);
          }
        }
        return resolve(data);
    }, (error) => {
      return reject(error);
    });
  });


  }

  public insertActivity(
    RLSActivity: string,
    RLSActivityDatetime: any ) {
      return new Promise((resolve, reject) => {
        this.storage.executeSql("INSERT INTO ACTIVITIES (activity_name, activity_datetime) VALUES (?, ?)", [RLSActivity, RLSActivityDatetime]).then((data) => {
          return resolve(data);
      }, (error) => {
        return reject(error);
      });
    });
  }

}

我在两个页面上使用它:“模态添加”和“统计信息”。

我的 modal-add.ts 完美无缺

import { Component } from '@angular/core';
import { NavController  } from 'ionic-angular';
import { IonicPage, NavParams, ViewController } from 'ionic-angular';
import { DiaryPage } from '../diary/diary';
import {Validators, FormBuilder, FormGroup } from '@angular/forms';
import { DatabaseProvider } from '../../providers/database/database';

@IonicPage()
@Component({
  selector: 'page-modal-add',
  templateUrl: 'modal-add.html',
})
export class ModalAddPage {

  private activityForm: FormGroup;

  constructor(
    public navParams: NavParams,
    private view: ViewController,
    private navCtrl: NavController,
    private formBuilder: FormBuilder,
    public database: DatabaseProvider
  ) {
    this.activityForm = this.formBuilder.group({
          title: [''],
          date: [''],
        });

   }

  closeModal(){

    const inputData = {
      title: this.activityForm.value.title,
      date: this.activityForm.value.date,
    };

    this.database.insertActivity(inputData.title, inputData.date);
  (...)
  }

}

stats.ts 返回错误

import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { DiaryPage } from '../diary/diary';
import { DatabaseProvider } from '../../providers/database/database';
import { Chart } from 'chart.js';

@IonicPage()
@Component({
  selector: 'page-stats',
  templateUrl: 'stats.html'
})
export class StatsPage {

  @ViewChild('lineCanvas') lineCanvas;

  lineChart: any;
  events: any;

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    private db: DatabaseProvider
  ) {

  } 

  ionViewDidLoad() {

    this.events = this.db.getData();
    this.lineChart = new Chart(this.lineCanvas.nativeElement, {
     (...) // stuff to create a chart
  }

}

有什么想法吗?

提前感谢您的帮助。

1 个答案:

答案 0 :(得分:0)

解决:我做了一些糟糕的noob错误。

我的提供程序方法中没有任何问题,经过一千次更改后,我恢复到其初始结构:

public getData() {

  return new Promise((resolve, reject) => {
    this.storage.executeSql('SELECT * from ACTIVITIES', []).then((data) => {
      let activityValues = [];
      if (data.rows.length > 0) {
        for(let i=0; i <data.rows.length; i++) {
          activityValues.push(data.rows.item(i).activity_datetime);
        }
      }
      // alert(activityValues); // contains data
      resolve(activityValues);
    }, (error) => {
      reject(error);
    })
  });
}

新手的事情是尝试传递数据,因为Promise obj是一个正常的功能。事实上,我必须在 stats.ts 中使用 .then()

ionViewDidEnter() {

  this.db.getData().then( res => {

      this.events = res;

      // some new stuff below
      this.lineChart.config.data.labels = this.events;
      this.lineChart.update();
  });

}

正如您所看到的,出于优先级原因,我不得不用ionViewDidEnter()替换ionViewDidLoad()。

谢谢你。