I'm currently working on some TypeScript code that searches for the nearest point around a user in need of car assistance by checking a database. Once the nearest point is identified, the code retrieves the phone number associated with it and initiates a call. However, I've encountered a problem where the functionality only works after the first click event triggers the process. The initial attempt returns "undefined" as a result.
repairerInfoCall: RepairerInfo;
userLongitude: number;
userLatitude: number;
repairersHeaderInfo: RepairerHeaderInfo[]; // Initialized during OnInit
navigateToComponent(navigationButton: NavigationButtonsEnum) {
switch (navigationButton) {
/.../
case NavigationButtonsEnum.RoadsideAssistance:
/.../
else if (this.userLatitude != null && this.userLongitude != null && this.repairersHeaderInfo != null) {
let data = this.repairersHeaderInfo.reduce((prev, current) => (prev.distance < current.distance) ? prev : current);
this.repairerService.getCompanyInfoById(data.id.toString()).subscribe(repInfo =>{
this.repairerInfoCall = repInfo
})
window.location.href = "tel:" + this.repairerInfoCall.phoneNumber;
}
/.../
HTML:
<button mat-raised-button class="home-buttons"
(click)="navigateToComponent(navigationButtonsEnum.RoadsideAssistance)">
<img src="assets/icons/tow-truck.png" class="home-icons">
<div>Roadside Assistance</div>
</button>
</div>
The code successfully retrieves all necessary information from the server. However, there seems to be an issue with subscribing to the data on the first attempt which results in a failure. Subsequent attempts work perfectly fine. I am trying to understand why this issue occurs initially.