Hey everyone, not sure why this is happening and I’ve been banging my head against a wall.
I have a component inside my ion-menu and data is updating when looking at console.log, but the view is not reflecting those changes. When my menu opens, I fire an event to refresh the data in the component.
tabs.html
<ion-tabs...></ion-tabs>
<ion-menu [content]="mycontent" (ionOpen)="contactsMenuOpened($event)" (ionClose)="contactsMenuClosed($event)" side="right" id="contacts">
<ion-content>
<contacts-menu #contactsMenu></contacts-menu>
</ion-content>
</ion-menu>
The tabs component fires the contactsMenuOpened
function which gets the instance of my component ContactsMenu
which then fires a function inside that ContactsMenu
component, refreshContacts()
.
contactsMenuOpened() {
this.contactMenu.refreshContacts();
}
The ContactsMenu.refreshContacts()
function fires and new data is retrieved, but the view is not updated and I cannot understand why.
contacts-menu.ts component
public refreshContacts() {
this.loadingContacts = true;
this.getUserContacts();
}
getUserContacts() {
this.contactsSubscription = this.contactsService.getContacts(params).subscribe(
(data) => {
if (this.params.page > 1) {
this.contacts = this.contacts.concat(data.list);
} else {
this.contacts = data.list;
};
this.pagination = data.meta.pagination;
this.loadingContacts = false;
},
(err) => this.handleError(err)
)
}
contacts-menu.html template
<div padding *ngIf="loadingContacts">
<ion-spinner></ion-spinner>
</div>
<ion-list>
<contact-item *ngFor="let contact of contacts" [contact]="contact"></contact-item>
</ion-list>
I use code similar to this in other places in the app, and it works but this is not working. Any ideas why?
It does work by using this.zone.run
, but is that really the correct way to handle this?
Thanks