Hi,
I’m developing an app with a sliding list to edit and delete elements and a button to add elements to that list. When I want to add or edit I use a ModalController and to delete I just touch on the button. The list is using a pouchdb database.
When I make some action with this buttons, the list doesn’t update automatically. I have to touch on another button (for example a sliding menu) to make the change to take effect.
I implemented the NavController method ionViewDidEnter() with the code to update the list, but it doesn’t do anything.
Am I missing something?
Thank you in advance,
João Soares
This is hard to understand without seeing any code, but maybe you are expecting ion-change to fire Angular 2’s change detection, and it doesn’t. If that’s the issue, you can set ion-change to fire ApplicationRef.tick() for example, to get Angular to notice the change.
Thank you, but it doesn’t work.
This is a sample of the code i’m using.
.
.
.
ionViewDidEnter() {
this.items.getItems().then((data) => {
this.currentItems = data;
});
}
updateItems(){
this.items.getItems().then((data) => {
this.currentItems = data;
});
this.ref.tick();
}
addItem() {
let addModal = this.modalCtrl.create(ItemCreatePage);
addModal.onDidDismiss(item => {
if (item) {
this.items.createItem(item);
this.updateItems();
}
})
addModal.present();
}
deleteItem(item, slidingItem) {
this.items.deleteItem(item);
slidingItem.close();
this.updateItems();
}
editItem(item, slidingItem) {
console.log(item);
let editModal = this.modalCtrl.create(ItemEditPage, {item: item});
editModal.onDidDismiss(item => {
if (item) {
this.items.updateItem(item);
}
slidingItem.close();
this.updateItems();
})
editModal.present();
}
openItem(item) {
this.navCtrl.push(ItemDetailPage, {
item: item
});
}
.
.
.
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>LIST</ion-title>
<ion-buttons end>
<button ion-button icon-only (click)="orderItems()">
<ion-icon name="options"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item-sliding *ngFor="let item of currentItems" #slidingItem>
<ion-item (click)="openItem(item)">
<ion-thumbnail item-left>
<img style="display:inline-block" [src]="item.profilePic" />
</ion-thumbnail>
<h2>{{item.name}}</h2>
<p>{{item.about}}</p>
<ion-note item-right *ngIf="item.note">{{item.note}}</ion-note>
</ion-item>
<ion-item-options>
<button ion-button color="white" (click)="editItem(item, slidingItem)">
EDIT
</button>
<button ion-button color="danger" (click)="deleteItem(item, slidingItem)">
DELETE
</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
<ion-fab right bottom>
<button ion-fab (click)="addItem()" color="danger">
<ion-icon name="add"></ion-icon>
</button>
</ion-fab>
</ion-content>
Adding, deleting ou editing an item doesn’t change the view list. Only after opening an item.
I didn’t see the code for getItems(), which seems important. Regardless, my first thought is that, if it were my code, I would refactor it so I was subscribing to an Observable.
getItems() {
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);
});
});
}
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 really think it’s worth learning TypeScript and RxJs, so you don’t have to write code like this ever again. You’ll be able to create asynchronous code that is easy to debug.
Among other things, you’re calling this.ref.tick() with no guarantee that this.currentItems has been updated already. I don’t think you have a clear understanding of the difference between synchronous and asynchronous commands. I don’t want to trace through your code to find each instance of this, sorry. But if you can recognize that this.ref.tick() needs to go inside the then, not outside it – because it may well execute before the interior of the then does – that’s a place to start.