Ich verwende pouchdb in Ionic 2 Rc.0, um Daten von cloudantdb zu synchronisieren.Pouchdb in Ionic 2 RC.0 funktioniert nicht
I install pouch db using:
npm install pouchdb --saveI install SQLITE Plugin: onic plugin add
https://github.com/litehelpers/Cordova-sqlite-storageI install typings for pouch db:
typings install --global --save dt~pouchdb dt~pouchdb-adapter-websql dt~pouchdb-browser dt~pouchdb-core dt~pouchdb-http dt~pouchdb-mapreduce dt~pouchdb-node dt~pouchdb-replicationI also run the following command to generate a Data service:
ionic g provider Data
Meine data.ts Datei
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import * as PouchDB from 'pouchdb';
@Injectable()
export class Data {
data: any;
db: any;
remote: any;
username: any;
password: any;
constructor(public http: Http) {
console.log('Hello Data Provider');
this.db = new PouchDB('swqms');
this.username = 'xxx';
this.password = 'xxx';
this.remote = 'https://xxx-bluemix.cloudant.com/xxx';
let options = {
live: true,
retry: true,
continuous: true,
auth: {
username: this.username,
password: this.password
}
};
this.db.sync(this.remote, options);
}
addDocument(doc){
this.db.put(doc);
}
getDocuments(){
console.log("Yes");
return new Promise(resolve => {
this.db.allDocs({
include_docs: true
}).then((result) => {
console.log("resutl = " + JSON.stringify(result))
this.data = [];
let docs = result.rows.map((row) => {
this.data.push(row.doc);
resolve(this.data);
});
this.db.changes({live: true, since: 'now', include_docs: true}).on('change', (change) => {
this.handleChange(change);
});
}).catch((error) => {
console.log(error);
});
});
}
handleChange(change){
let changedDoc = null;
let changedIndex = null;
this.data.forEach((doc, index) => {
if(doc._id === change.id){
changedDoc = doc;
changedIndex = index;
}
});
//A document was deleted
if(change.deleted){
this.data.splice(changedIndex, 1);
}
else {
//A document was updated
if(changedDoc){
this.data[changedIndex] = change.doc;
}
//A document was added
else {
this.data.push(change.doc);
}
}
}
}
Meine app.module.ts Datei
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import {Storage} from '@ionic/storage';
import {Data} from '../providers/data';
@NgModule({
declarations: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage
],
imports: [
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage
],
providers: [Storage, Data]
})
export class AppModule {}
Meine app.component.ts Datei ist:
import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from 'ionic-native';
import {Data} from '../providers/data';
@Component({
template: `<ion-nav [root]="rootPage"></ion-nav>`,
providers: [Data]
})
export class MyApp {
rootPage = TabsPage;
constructor(platform: Platform) {
platform.ready().then(() => {
StatusBar.styleDefault();
});
}
}
Es gibt ein Problem in der Datei data.ts. Wenn ich diese Zeile kommentieren this.db = new PouchDB('sqwms'); Standard-App wird auf dem Bildschirm angezeigt (Daten nicht synchronisiert obv) aber wenn ich diese Zeile auskommen nichts auf dem Bildschirm angezeigt wird.
Jemand bitte helfen Sie mir. Vielen Dank.
Sehen Sie Fehler in der Konsole? – Ivan