数据库准备好后，Ionic2 从 sqlite 加载行答案

【问题标题】：Ionic2 load rows from sqlite after database ready数据库准备好后，Ionic2 从 sqlite 加载行
【发布时间】：2017-01-16 06:48:35
【问题描述】：

我有一个 ionic 2 应用程序，其数据库服务由 sqlite 提供支持。数据库存储了几行项目。应用程序的第一页显示这些项目。我遇到的问题是页面尝试在服务加载数据库之前加载项目。我收到此错误：

Cannot read property 'executeSql' of undefined

如果我导航到不同的页面并返回主页，它会正确加载。这是数据库服务。我试图在第一页上调用 getScanables。

import { Injectable } from '@angular/core';
import {SQLite} from 'ionic-native';
import {Platform} from 'ionic-angular';

@Injectable()
export class Database {

    private storage: SQLite;
    public isOpen: boolean;

    public constructor(private platform: Platform,) {
        console.log('Creating storage.');
        platform.ready().then(() => {
            console.log('Platform Ready.');
            if(!this.isOpen) {
                console.log('Database Unopened');
                this.storage = new SQLite();
                this.storage.openDatabase({name: "data.db", location: "default"}).then(() => {
                    console.log('Generating Database');
                    this.storage.executeSql("CREATE TABLE IF NOT EXISTS scanables (id INTEGER PRIMARY KEY AUTOINCREMENT, value TEXT, type TEXT, name TEXT, date TEXT)", []);
                    //this.storage.executeSql("CREATE TABLE IF NOT EXISTS journal (id INTEGER PRIMARY KEY AUTOINCREMENT, role TEXT, descriptors TEXT, image TEXT, behaviors TEXT)", []);
                    console.log('Generated.');
                    this.isOpen = true;
                }, (error) => {
                    console.log("Error opening database.", error);
                });
            }
        });
    }   

    public getScanables() {
        console.log('Getting Scanables');
        return new Promise((resolve, reject) => {
            this.storage.executeSql("SELECT * FROM scanables", []).then((data) => {
                let journal = [];
                if(data.rows.length > 0) {
                    for(let i = 0; i < data.rows.length; i++) {
                        journal.push({
                            id: data.rows.item(i).id,
                            value: data.rows.item(i).value,
                            type: data.rows.item(i).type,
                            name: data.rows.item(i).name,
                            date: data.rows.item(i).date,
                            letter_one: data.rows.item(i).name.substring(0,1)
                        });
                    }
                }
                resolve(journal);
            }, (error) => {
                reject(error);
            });
        });
    }

    ...

}

这是第一页的相关代码：

@Component({
    templateUrl: 'journal.html'
})
export class JournalPage implements AfterViewInit {
    public orderType: string = 'delivery';
    public autocomplete: {term: string, place: any};
    public regions: any;
    public itemList: Array<Object>;   
    public addList: Array<number>;

    constructor(private navCtrl: NavController,
                private menu: MenuController,
                private modalCtrl: ModalController,
                private database: Database,     
                public  userService: UserService,
                private helper: Helper,                           
                private l: LoggerService) {

        this.itemList = [];     
        this.addList = [1,2,3,4,5,6,7];        
    }

    ngAfterViewInit(): any { 
        console.log('journal.ngAfterViewInit');
        this.load(); 
    }

    public load() {
        console.log('journal.load');
        this.database.getScanables().then((result) => {
            console.log('entered getScanables');
            this.itemList = <Array<Object>> result;
            console.log('itemList', this.itemList);
        }, (error) => {
            this.l.error('journal.ts:', error);
        });
    }  

    ...

【问题讨论】：

标签： sqlite angular ionic2

【解决方案1】：

此问题的解决方案是使服务的数据库成为公共变量并在加载时加载数据库。然后只有在加载数据库后我们才设置根页面。这会强制数据库首先加载。虽然可能不是理想的解决方案，因此请随时发布其他答案。

【讨论】：