Question

我在Ionic 2 Rc.0中使用pouchdb来同步来自cloudantdb的数据。

我使用：npm install pouchdb --save
安装pouch db
我安装了SQLITE插件：onic插件添加https://github.com/litehelpers/Cordova-sqlite-storage

我安装了包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-replication

我还运行以下命令来生成数据服务：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）但当我取消注释此行时，屏幕上没有显示任何内容。

有人请帮帮我。感谢。

Answer 1

控制台（浏览器，如果您使用ionic serve）和构建过程中的终端中必定存在一些错误，这将为您提供有关该问题的更多信息。

最有可能的是，Rollup存在一个问题，它自RC0以来捆绑了代码。请参阅官方Ionic文档中的App Build Scripts，其中＆＃34;第三方模块导出错误＆＃34;解释自定义汇总配置文件。他们以PouchDB为例。

Answer 2

错误是：

UnhandledPromiseRejectionWarning：未处理的promise拒绝（拒绝ID：1）：错误：node_modules / js-extend / extend.js不导出'extend'（由node_modules / pouchdb / lib / index-browser.es.js导入）

pouchdb 6.0.7的新版本已解决此错误。我更新了我的npm模块，现在它运行得很好。

Ionic 2 RC.0中的Pouchdb无法正常工作

2 个答案: