1
Ionic 2 Rc.0でpouchdbを使用してcloudantdbからデータを同期しています。Pouchdb in Ionic 2 RC.0が動作しません。
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
マイdata.tsファイルが
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);
}
}
}
}
マイapp.module.tsファイルが
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 {}
マイapp.component.tsファイルがあるあるある：
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();
});
}
}
data.tsファイルに問題があります。 私はこの行にコメントしたらthis.db = new PouchDB('sqwms');デフォルトのアプリが画面に表示されています（データはobvを同期していません）。 この行のコメントを外すと、画面に何も表示されません。
誰か助けてください。ありがとう。
コンソールにエラーが表示されますか。 – Ivan