I am working with two arrays in my code:
bookingHistory: Booking[] = [];
currentBookings: any[] = [];
Both arrays are populated later in the code. The bookingHistory array consists of instances of Booking, while currentBookings contains arrays of Booking objects.
In my HTML template, I have the following structure:
<table class="w3-table w3-striped">
<tbody>
<tr *ngFor="let booking of bookingHistory; let i = index">
<td>{{booking?.level}}</td>
<td>{{booking?.date}}</td>
<td>{{booking?.room}}</td>
<td>AM</td>
<td>{{booking?.am_dept}}</td>
<td>{{booking?.am_surg}}</td>
<td>{{currentBookings[i][0]?.level}}</td>
<td>{{currentBookings[i][0]?.date}}</td>
<td>{{currentBookings[i][0]?.room}}</td>
<td>AM</td>
<td>{{currentBookings[i][0]?.am_dept}}</td>
<td>{{currentBookings[i][0]?.am_surg}}</td>
</tr>
</tbody>
</table>
Although this setup is functioning correctly, each line containing currentBookings[i][0] is generating an error message in the console:
ERROR TypeError: Cannot read property '0' of undefined
I am concerned about potential issues that may arise from this. Any insights on what might be causing this error?
UPDATE:
The bookingHistory array comprises Bookings structured like this: [{…}, {…}, {…}]
A single Booking object looks something like this:
{url: "http://127.0.0.1:8000/booking/3203/", date: "2017-09-05", level:
4, room: 5, am_dept: "Cardiac (A)", …}
On the other hand, currentBookings follows this pattern: [[{…}], [{…}], [{…}]]