Dealing with an array of objects for use in a ngFor loop has presented a challenge. The issue arises when the order that was initially set for the array changes unexpectedly due to JavaScript manipulation.
Originally, the array is ordered as expected when I set a breakpoint before the console.log:
However, upon logging the array, the element at position 8 seems to be shifted to position 0, causing the ngFor loop to interpret it in this revised order:
The construction of the array is demonstrated in the following code snippet:
this.recommendations.forEach(recommendation => {
recommendation.Journeys.forEach(function (journey, indexJour) {
journey.Segments.forEach(function (segment, indexSeg) {
segment.Flights.forEach(function (flight, index) {
const newFlight: FlightAvailabityByPrice = {
// flight details here
};
if (!(journey.JourneyId in newGroup)) {
// logic here
}
tempFlights.push(newFlight);
});
});
});
const newRecommendation: RecommendationList = {
flights : tempFlights
};
tempFlights = [];
tempRecommendation.push(newRecommendation);
tempGroups.push(newGroup);
newGroup = {};
});
this.rowGroups = tempGroups;
this.flightsInfo = tempRecommendation;
In the HTML markup, the table component from PrimeNG used for the body is shown below:
<ng-template pTemplate="body" let-recoInfo let-index="rowIndex">
<tr class="ui-widget-header" *ngIf="rowGroups[i][recoInfo.journeyId].index === index">
<td colspan="14">
<i class="fa fa-plane" [ngClass]="{'departure': recoInfo.journeyId === 1, 'arrival': recoInfo.journeyId !== 1}"></i>
<span style="font-weight:bold">{{recoInfo.journeyId === 1 ? 'SELECT_DEPARTURE' : 'SELECT_ARRIVAL'}}</span>
</td>
</tr>
<tr>
<td>
<mz-checkbox-container>
// checkbox input
</mz-checkbox-container>
</td>
<td>
<img src="assets/images/flight_companies/{{recoInfo.company}}.png" alt="{{recoInfo.company}}">
</td>
<td>{{recoInfo.system}}</td>
// more table rows here
</tr>
</ng-template>
Any assistance provided will be greatly appreciated!