I've been working on an AngularJS app for about a week now, developing a backoffice application for my service.
My main challenge lies in using data retrieved from a remote server. I have 4 HTTP GET requests in my app - 2 of them fetching lists of users and orders, which work as expected. However, the other 2 requests aimed at fetching user details and order details are throwing the same error.
The error message related to user details can be viewed here.
This is the component (user-details.component.ts):
(Component code here)Below is the service file (user-details.service.ts):
(Service code here)And here's the model structure (user-details.model.ts):
(Model contents here)Snippet from the template file where the data from the server is utilized (user-details.template.ts):
(Template snippet here)Lastly, this is the JSON response received from the API call:
(JSON response here)I appreciate your time in reviewing this issue, and I look forward to any guidance you can provide to help me identify what might be going wrong.
EDIT: I have made an update by adding a directive "*ngIf="userDetailsModel" within the main wrapping the template, which resolved the issue. It turns out that the template was trying to access object properties before the HTTP request completed fetching the data.