The angular 6 calling-component-code I'm working with is as follows:
this.appDowntimeService.getAllApplications(this.message, this.appDetails);
Here's the service method being called:
async getAllApplications(message: any[], appDetails: any[]) {
this.http.get(environment.serverTMODowntime + '/tmodowntime.v1/downtime/apps/all', {headers: this.headers})
.subscribe((res: any[]) => {
message.length = 0;
appDetails.length = 0;
res.forEach(x => {
message.push(x);
x.details.forEach(y => {
const appDetail = <ApplicationDetail>{};
appDetail.createdDate = y.createdDate;
appDetail.createdBy = y.createdBy;
appDetail.updatedDate = y.updatedDate;
appDetail.updatedBy = y.updatedBy;
appDetails.push(appDetail);
});
});
appDetails.sort((leftSide, rightSide) => {
if (leftSide.startTime < rightSide.startTime) return -1;
if (leftSide.startTime > rightSide.startTime) return 1;
return 0;
});
this.updated.emit('success');
});
}
In the calling-component-code, I expect changes in both arrays (message and appDetails) to be visible. Oddly enough, only changes made within the service function call to the message array are showing up. Changes to the appDetails array, on the other hand, are not reflecting in the calling-component-code. This discrepancy has puzzled me, and I am unsure why it behaves differently for each array.
If anyone can provide insight or assistance, it would be greatly appreciated.