Ionic 2 Rc.0에서 pouchdb를 사용하여 cloudantdb의 데이터를 동기화합니다. 내 app.component.ts 파일Ionic 2 RC.0의 Pouchdb가 작동하지 않습니다.
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.module.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);
}
}
}
}
됩니다
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 { 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