Friends,
I tried a new Sqlite implementation as part of my experiment. For that i installed plugin
cordova-sqlite-storage 2.2.1 “Cordova sqlite storage plugin”
I attach my provider file (sqlite.ts), template (bid.html), Controller (bid.ts) and configuration files as attachment.
Here I set rootPage as “BidPage” . I got error in initial page as
Uncaught (in promise): TypeError: _this.db is null
[99]/Sqlite.prototype.getRows/<@http://localhost:8100/build/main.js:464:13
t@http://localhost:8100/build/polyfills.js:3:21506
[99]/Sqlite.prototype.getRows@http://localhost:8100/build/main.js:461:16
BidPage/<@http://localhost:8100/build/main.js:67:13
sqlite.ts
import {Injectable} from '@angular/core';
declare var window : any;
@Injectable()
export class Sqlite {
public text : string = "";
public db = null;
public arr = [];
constructor() {}
/**
*
* Open The Datebase
*/
openDb()
{
this.db = window.sqlitePlugin.openDatabase({name: 'sanchaya.db', location: 'default'});
this.db.transaction
(
(tx) =>
{
tx.executeSql('CREATE TABLE IF NOT EXISTS Buildings (id integer primary key,buildingId text)');
},
(e) =>
{
console.log('Transtion Error', e);
},
() =>
{
console.log('Populated Datebase OK..');
}
)
this.db.transaction
(
(tx) =>
{
tx.executeSql('CREATE TABLE IF NOT EXISTS Buildinglist (id integer primary key,doorno text,subno text,demand text)');
},
(e) =>
{
console.log('Transtion Error', e);
},
() =>
{
console.log('Populated Datebase OK..');
}
)
}
/**
*
* @param addItem for adding: function
*/
addItem(i) {
return new Promise(resolve => {
var InsertQuery = "INSERT INTO Buildings (buildingId) VALUES (?)";
this
.db
.executeSql(InsertQuery, [i], (r) => {
console.log('Inserted... Sucess..', i);
this
.getRows()
.then(s => {
resolve(true)
});
}, e => {
console.log('Inserted Error', e);
resolve(false);
})
})
}
//Refresh everytime
getRows() {
return new Promise(res => {
this.arr = [];
let query = "SELECT * FROM Buildings";
this
.db
.executeSql(query, [], rs => {
if (rs.rows.length > 0) {
for (var i = 0; i < rs.rows.length; i++) {
var item = rs
.rows
.item(i);
this
.arr
.push(item);
}
}
res(true);
}, (e) => {
console.log('Sql Query Error', e);
});
})
}
//to delete any Item
del(id) {
return new Promise(resolve => {
var query = "DELETE FROM Buildings WHERE id=?";
this
.db
.executeSql(query, [id], (s) => {
console.log('Delete Success...', s);
this
.getRows()
.then(s => {
resolve(true);
});
}, (err) => {
console.log('Deleting Error', err);
});
})
}
//to Update any Item
update(id, txt) {
return new Promise(res => {
var query = "UPDATE Buildings SET buildingId=? WHERE id=?";
this
.db
.executeSql(query, [
txt, id
], (s) => {
console.log('Update Success...', s);
this
.getRows()
.then(s => {
res(true);
});
}, (err) => {
console.log('Updating Error', err);
});
})
}
}
- bid.html
<ion-header>
<ion-navbar>
<ion-title>
Building Add/Update/Delete
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<h4>Create Building ID List</h4>
<div>
<ion-item>
<ion-label fixed>Enter Building ID</ion-label>
<ion-input type="text" [(ngModel)]="text"></ion-input>
</ion-item>
<button ion-button (click)="add(text)">Add</button>
</div>
<ul>
<li *ngFor="let building of buildings; let i=index">{{building.buildingId}} <span ion-button (click)="update(building.id,building.buildingId)">Update</span> <span ion-button (click)="delete(building.id)">X</span></li>
</ul>
<button [navPush]="buploadPage">UPLOAD DATA</button>
</ion-content>
- bid.ts
import {Component} from '@angular/core';
import {Platform} from 'ionic-angular';
import {NavController} from 'ionic-angular';
import {Sqlite} from '../../providers/sqlite';
@Component({selector: 'page-bid', templateUrl: 'bid.html'})
export class BidPage
{
public buildings = [];
public text : any;
constructor(public navCtrl : NavController, public sqliteService : Sqlite, protected platform : Platform)
{
//First We need to ready the Platform
this.platform.ready().then
(
() =>
{
this.sqliteService.getRows().then
(
s =>
{
this.buildings = this.sqliteService.arr;
}
);
}
)
}
//Adding the Function
add(i)
{
this.sqliteService.addItem(i).then
(
s =>
{
this.buildings = this.sqliteService.arr;
this.text = '';
}
);
}
//Deleting function
delete(i)
{
this.sqliteService.del(i).then
(
s =>
{
this.buildings = this.sqliteService.arr;
}
);
}
//updating function
update(id, building)
{
var prompt = window.prompt('Update', building);
this.sqliteService.update(id, prompt).then
(
s =>
{
this.buildings = this.sqliteService.arr;
}
);
}
}
- app.module.ts
import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { BidPage } from '../pages/bid/bid';
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import {Sqlite} from '../providers/sqlite';
@NgModule({
declarations: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage,
BidPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage,
BidPage
],
providers: [
StatusBar,
SplashScreen,
Sqlite,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
- app.component.ts
import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import {Sqlite} from '../providers/sqlite';
import { BidPage } from '../pages/bid/bid';
//import { TabsPage } from '../pages/tabs/tabs';
@Component({
templateUrl: 'app.html'
})
export class MyApp {
//rootPage:any = TabsPage;
rootPage = BidPage;
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen,sqlite:Sqlite) {
platform.ready().then(() => {
statusBar.styleDefault();
splashScreen.hide();
sqlite.openDb();
});
}
}
Please advise what I am wrong with
Thanks
Anes