2017-01-30 6 views
0

私はApache Cordova、ionic 2を使ってアプリケーションを開発しています。私はCouchbase Liteをモバイルのローカルストレージに使いたいと思います。私は、データを格納することができると思います。しかし、私はデータを取得することができません。私は、リンクhttps://blog.couchbase.com/2016/december/data-synchronization-with-couchbase-in-ionic-2-hybrid-mobile-appsで与えられた例を使って、Couchbaseローカルデータベースで読み書き操作を実行しました。上記プログラムcreateAgentでcordova、ionic 2を使用して開発されたアプリでcouchbase Liteからデータを取得するには?

import { Component, NgZone } from '@angular/core'; 
    import { NavController, AlertController } from 'ionic-angular'; 
    import { CouchbaseProvider } from "../../app/couchbase-provider"; 
    import { Toast } from 'ionic-native'; 
    import "rxjs/add/operator/map"; 

    @Component({ 
    selector: 'CreateAgent', 
    templateUrl: 'CreateAgent.html' 
    }) 
    export class CreateAgent { 
    // declare the variables to hold the values 
    firstName: string = ""; 
    lastName: string = ""; 
    dateofBirth: any = new Date().toISOString(); 
    aadharNumber: number; 
    panNumber: string = ""; 
    eMail: any; 
    userName: string=""; 
    mobileNumber: number; 
    password: any; 
    confPassword: any; 
    public items: Array<any>; 
    // constructor 
    constructor(public navCtrl: NavController, public alertCtrl: AlertController, public couchbase: CouchbaseProvider, public zone: NgZone) 
    { 
    this.items = []; 
    } 

    createAgent() 
    { 
    let userdetails = { 
    "type":"agentdetails", 
    "firstName": this.firstName, 
    "lastName": this.lastName, 
    "dateofBirth": this.dateofBirth, 
    "aadharNumber":this.aadharNumber, 
    "panNumber":this.panNumber, 
    "mobileNumber":this.mobileNumber, 
    "userName":this.userName, 
    "password":this.password, 
    "confPassword":this.confPassword 
    }; 
    this.couchbase.getDatabase().createDocument(userdetails).then((result:any)=>{ 
    Toast.show("Agent account created.", '6000', 'center').subscribe(
    toast => { 
    console.log(toast); 
    }); 
    },errors=> 
    { 
    Toast.show("Failed to create an account for the user.", 'long', 'center').subscribe(
    toast => { 
    console.log(toast); 
    }); 
    }); 
    } 

    public showAgents() { 

    Toast.show("In the show method...", 'long', 'center').subscribe(
    toast => { 
    console.log(toast); 
    }); 

    setTimeout(() => { 

    this.couchbase.getChangeListener().subscribe(data => { 
    for (let i = 0; i < data.length; i++) { 
    if (!data[i].hasOwnProperty("deleted") && data[i].id.indexOf("_design") === -1) { 
    this.couchbase.getDatabase().getDocument(data[i].id).then((result: any) => { 
    if (result.type === "agentdetails") { 
    this.zone.run(() => { 
    this.items.push(result); 
    Toast.show("In the show method..."+result.type, 'long', 'center').subscribe(
    toast => { 
    console.log(toast); 
    }); 
    }); 
    } 
    }); 
    } 
    } 
    }); 
    }, 100); 


    this.couchbase.getDatabase().queryView("_design/todo", "items", {}).then((result: any) => { 
    this.items = []; 
    for (var i = 0; i < result.rows.length; i++) { 
    this.items.push(result.rows[i].value); 
    Toast.show("In the query view..."+result.type, 'long', 'center').subscribe(
    toast => { 
    console.log(toast); 
    }); 
    } 

    Toast.show("Values:"+result.rows[0].value, 'long', 'center').subscribe(
    toast => { 
    console.log(toast); 
    }); 

    }, error => { 
    console.error("ERROR: " + JSON.stringify(error)); 
    Toast.show("Error"+JSON.stringify(error), 'long', 'center').subscribe(
    toast => { 
    console.log(toast); 
    }); 
    }); 
    } 
    } 

()メソッドは、データベースへのエージェントの詳細を追加するために使用される:続い

CreateAgent.tsのコードです。 showAgents()メソッドは、作成されたエージェントの詳細を表示するために使用されます。 CreateAgent.htmlの

コード:

<ion-header> 
    <ion-navbar color ="secondary"> 
    <button ion-button menuToggle> 
    <ion-icon name="menu"></ion-icon> 
    </button> 
    <ion-title>Net Zone</ion-title> 
    </ion-navbar> 
    </ion-header> 

    <ion-content padding> 
    <h3>Create Agent</h3> 
    <ion-list> 
    <!--Input box to read the first name the user --> 
    <ion-item> 
    <ion-label floating>First Name*</ion-label> 
    <ion-input type="text" [(ngModel)]="firstName"></ion-input> 
    </ion-item> 

    <!--Input box to read the last name the user --> 
    <ion-item> 
    <ion-label floating>Last Name</ion-label> 
    <ion-input type="text" [(ngModel)]="lastName"></ion-input> 
    </ion-item> 

    <!--Read the date of birth from the user --> 
    <ion-item> 
    <ion-label floating>Date of Birth</ion-label> 
    <ion-datetime displayFormat="DD-MMM-YYYY" pickerFormat="DD-MMM-YYYY" [(ngModel)]="dateofBirth"></ion-datetime> 
    </ion-item> 

    <!--Input box to read the Aadhar number of the user --> 
    <ion-item> 
    <ion-label floating>Aadhar Number</ion-label> 
    <ion-input type="number" [(ngModel)]="aadharNumber"></ion-input> 
    </ion-item> 

    <!--Input box to read the PAN number of the user --> 
    <ion-item> 
    <ion-label floating>PAN Number</ion-label> 
    <ion-input type="text" [(ngModel)]="panNumber"></ion-input> 
    </ion-item> 

    <!--Input box to read the email address of the user --> 
    <ion-item> 
    <ion-label floating>Email</ion-label> 
    <ion-input type="mail" [(ngModel)]="eMail"></ion-input> 
    </ion-item> 

    <!--Input box to choose the username for the user --> 
    <ion-item> 
    <ion-label floating>Choose your Username</ion-label> 
    <ion-input type="text" [(ngModel)]="userName"></ion-input> 
    </ion-item> 

    <!--Input box to read the mobile number of the user --> 
    <ion-item> 
    <ion-label floating>Mobile Number</ion-label> 
    <ion-input type="number" [(ngModel)]="mobileNumber"></ion-input> 
    </ion-item> 

    <!--Input box to prompt the user to enter password --> 
    <ion-item> 
    <ion-label floating>Create Password</ion-label> 
    <ion-input type="password" [(ngModel)]="password"></ion-input> 
    </ion-item> 

    <!--Input box to prompt the user to enter password --> 
    <ion-item> 
    <ion-label floating>Confirm your Password</ion-label> 
    <ion-input type="password" [(ngModel)]="confPassword"></ion-input> 
    </ion-item> 

    <!--Add button to create the account for the user--> 
    <button ion-button secondary (click)="createAgent()">Create User Account</button> 

    <button ion-button secondary (click)="showAgents()">Show Agents</button> 
    <ion-item> 
    <ion-label>Agent's Details</ion-label> 
    </ion-item> 
    <ion-item *ngFor="let item of items"> 
    {{ item.firstName }} 
    </ion-item> 

    </ion-list> 

    </ion-content> 

しかし、私のコードは、ローカル・データベースからデータを取得されていません。 問題の修正にお役立てください。私はあなたのすべての助けに感謝します。

(編集:追加のコードを追加) Couchbaseの-provider.tsコード:

import { Injectable, EventEmitter } from '@angular/core'; 
    import { Http } from '@angular/http'; 
    import { Platform } from 'ionic-angular'; 
    import { Couchbase, Database } from "cordova-couchbase/core"; 
    import 'rxjs/add/operator/map'; 

    declare var emit: any; 

    @Injectable() 
    export class CouchbaseProvider { 

    private isInstantiated: boolean; 
    private database: Database; 
    private listener: EventEmitter<any> = new EventEmitter(); 

    public constructor(public http: Http, platform: Platform) { 
    if(!this.isInstantiated) { 
    platform.ready().then(() => { 
    (new Couchbase()).openDatabase("netzone").then(database => { 
    this.database = database; 
    let views = { 
    items: { 
    map: function(doc) { 
    if(doc.type == "list" && doc.title) { 
    emit(doc._id, {title: doc.title, rev: doc._rev}) 
    } 
    }.toString() 
    } 
    }; 
    this.database.createDesignDocument("_design/todo", views); 

    this.database.listen(change => { 
    this.listener.emit(change.detail); 
    }); 
    this.database.sync("http://127.0.0.1:4984/_admin", true); 
    this.isInstantiated = true; 
    }, error => { 
    console.error(error); 
    }); 
    }); 
    } 
    } 

    public getDatabase() { 
    return this.database; 
    } 

    public getChangeListener(): EventEmitter<any> { 
    return this.listener; 
    } 

    public fetch() { 
    return this.database.getAllDocuments.toString(); 
    } 
    } 
+0

あなたは 'couchbaseProvider'コードを追加できますか? –

+0

@suraj:couchbase-provider.tsコードを追加しました。チェックしてください。 –

+0

ログには何か? –

答えて

0

私は以下の修正を使用してCouchbaseの光からデータを取得することができる午前:

変更showAgents()メソッドCreateAgents.tsファイルに次のように:

public showAgents() { 
//query the database using the design document and get the results 
     this.chitProvider.getDatabase().queryView("_design/agentsDesign", "agents", {}).then((agentsDesignResult: any) => { 
      this.agentsArray = []; 
      //loop to read the documents as JSON objects and store them in the items array 
      for(var i = 0; i < agentsDesignResult.rows.length; i++) { 
       this.chitZone.run(() => { 
        this.agentsArray.push(agentsDesignResult.rows[i].value); 
       }); 
} 
      }, error => { 
       console.error("ERROR: " + JSON.stringify(error)); 
      }); 
    } 
} 

変更CreateAgent.html次のように

 <!--Button to show all agents account details--> 
     <button ion-button secondary (click)="showAgents()">Show Agents</button>   
     <ion-item> 
      <ion-label>Agent's Details</ion-label>    
     </ion-item> 

     <ion-item *ngFor="let agt of agentsArray"> 
      <ion-item>{{ agt.fName }}</ion-item> 
      <ion-item>{{ agt.lName }}</ion-item> 
     </ion-item> 

注:複数の値を取得するには、これらのキー値のペアの詳細をデザイン文書のビューに追加します。

関連する問題