Hi there, I’m new to ionic and got a problem with unexpected data changing while switch between pages.
The app consists of the following components:
- A service for local storage, data in an array of objects. When starting the app, the array in the service will be filled from storage.
- A list page, which contains an array of the same type as in the service. On ionViewDidEnter, the array will be filled with the values from the array of the storage-service, then displays the values in a list.
- A detail page, which contains a variable for the object to display. The page contains ion-items as input fields for the values of the object, two way-binding with ngModel. In the navbar there’s a button, which calls a saveButtonClicked() for saving the changes at the object by calling the corresponding function of the service. When using the back-button of the navbar, the app should return to the list view without any changes at the object.
Now to my issue:
The list view shows the values from the array correct. When tapping an entry, the detail page opens and shows the values of the list entry correct in the fields of the page. When using the back-button after editing a value, the app returns to the list view, but instead to “forget” the changes, the changed value is now stored in the corresponding object in the array of the list page. This change seems to happen not only in the array of the list page, the object in the array of the service is also changed. Only the values of the local storage are unchanged.
I tried some different ways to solve this (private properties, different names of the properties in the components, different ways to push the object from list page to detail page), but none of them worked.
Thank you in advance for any suggestions!