One of my services is called "user-data", and its main function is to fetch "user data" when a request is received.
I have a specific page that is responsible for displaying this "user data". Upon loading the page, it retrieves the data and displays it.
Additionally, I have a menu with various buttons. Clicking on these buttons triggers a request to the "user-data" service to modify the data. After the data is modified, I want the page to be notified of the change and adjust accordingly.
The approach I take is as follows:
- In the service: an event named "user:change" is published along with the updated data
export class UserData{
users = [];
....
//- if data is changed,
//- publish an event
setUsers(users) {
this.users = users;
this.events.publish('user:change', users);
}
}
- In the page, subscribing to listen for this event
export class UserListPage {
users = [];
//- subscribe when the page is about to show
ionViewWillEnter() {
this.events.subscribe('user:change', this.updateUsers);
}
//- unsubscribe when leaving the page
ionViewDidLeave() {
this.events.unsubscribe('user:change', this.updateUsers);
}
//- update
updateUsers(userEventData) {
console.log('About to update');
if (userEventData[0] instanceof Array) {
this.users = userEventData[0];
}
console.log(this.users);
}
}
While everything works well within the updateUsers function, the issue arises when trying to assign a new value to this.users. It's quite perplexing.
On occasion, during debugging, an error message pops up saying: "attempted to assign to readonly property."
Any idea what might be causing this?