Is it possible to calculate the distance of each item while iterating through them?
Check out this Image for reference
In the code snippet below, the distance is retrieved using
(onResponse)="getDistance($event)" <div *ngFor="let routes of places[0].routes" class="todo-thumbnail-area">
<agm-map [zoom]="1">
<agm-direction [origin]="routes.origin" [destination]="routes.destination" (onResponse)="getDistance($event)">
</agm-direction>
</agm-map>
<div class="todo-price">One Way Trip Cost - {{ this.routeTotalDistance }}</div>
</div>
In Component.ts
getDistance (event) {
this.routeTotalDistance = event.routes[0].legs[0].distance.text;
}
When I print the routeTotalDistance in the console, I notice that different values are shown for each iteration, but the final value is the same for all items.
It seems like after the last iteration, the routeTotalDistance is being set to the last iterated value. How can I resolve this issue? Your guidance would be appreciated.