.我正在开发一个使用 ionic 2 的应用程序。我在 couchdb 中有关于 9 个不同项目的数据。如何显示与单击的项目对应的数据库中的每个数据。项目在列表中?
这是提供者诊断。
import { Injectable } from '@angular/core';
import PouchDB from 'pouchdb';
@Injectable()
export class Diagnosis{
data: any;
db: any;
remote: any;
constructor() {
this.db = new PouchDB('ezy');
this.remote = 'http://localhost:5984/ezy';
let options = {
live: true,
retry: true,
continuous: true
};
this.db.sync(this.remote, options);
}
getTodos() {
if (this.data) {
return Promise.resolve(this.data);
}
return new Promise(resolve => {
this.db.allDocs({
include_docs: true
}).then((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);
});
});
}
createTodo(todo){
this.db.post(todo);
}
getTodo(todo){
this.db.get(todo);
}
updateTodo(todo){
this.db.put(todo).catch((err) => {
console.log(err);
});
}
deleteTodo(todo){
this.db.remove(todo).catch((err) => {
console.log(err);
});
}
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);
}
}
}
}
提供程序使用情况为.ts
constructor(public navCtrl: NavController, public navParams: NavParams,public diagnose:Diagnosis) {
this.pet = "puppies";
console.log(diagnose.getTodos());
diagnose.getTodos().then(result=>{
this.pest = result;
console.log(result);
})
}
。.html
<ion-grid>
<ion-row>
<ion-col *ngFor="let val of pest" width-100>
<ion-list>
<ion-item><h3>{{val.name}}</h3></ion-item>
<ion-item><h3>{{val.description}}</h3></ion-item>
<ion-item><h3>{{val.disease}}</h3></ion-item>
<ion-item><h3>{{val.prevention}}</h3></ion-item>
</ion-list>
</ion-col>
</ion-row>
</ion-grid>
我不确定你想要什么。如果您需要显示单击的项目,您必须做的是添加(单击(事件,在该事件中调用发送该项目的函数(再次,我不知道您是否在问这个(...
<ion-item (click)="viewItem(val.prevention)"><h3>{{val.prevention}}</h3></ion-item>