TypeError: Impossible de lire la propriété « 0 » undefined fonctionne encore bien

Question

J'ai deux tableaux comme suit:

bookingHistory: Booking[] = []; 
currentBookings: any[] = []; 

Ils sont tous deux peuplés plus bas du code. bookingHistory est un tableau de Booking et currentBookings a un tableau de Booking tableaux.

Mon modèle html a les éléments suivants:

<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> 

donc cela fonctionne exactement comme prévu encore chaque ligne avec currentBookings[i][0] déclenche cette erreur dans la console. Suis-je en train de manquer quelque chose qui me causera un chagrin futur?

MISE À JOUR:

bookingHistory est un tableau de réservations comme suit: [{…}, {…}, {…}]

Un Booking est structuré comme suit:

{url: "http://127.0.0.1:8000/booking/3203/", date: "2017-09-05", level: 
4, room: 5, am_dept: "Cardiac (A)", …} 

Attendu que currentBookings est la suivante: [[{…}], [{…}], [{…}]]

Answer 1

était un problème Async à la fin.

En l'espace d'une seconde entre le deuxième tableau en cours de remplissage, l'erreur TypeError: Cannot read property '0' of undefined a été déclenchée plusieurs fois, bien qu'elle ait semblé très fine à l'écran.

Correction d'un ajout d'un compteur et d'une variable boolean pour vérifier que le deuxième tableau avait été rempli avant le rendu de l'écran. Et enveloppant le gabarit avec.

<ng-container *ngIf="finished"> 
    <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> 
</ng-container> 

Il fonctionne maintenant comme prévu sans erreur.

Answer 2

Il semble que peut-être une erreur de syntaxe, il vous manque un point-virgule en déclarant des variables dans votre modèle:

<tr *ngFor="let booking of bookingHistory; let i = index"> 

pouvez-vous partager également la valeur de votre variable currentBookings, besoin de voir sa structure pour déboguer l'erreur.

Answer 3

Essayez ceci:

<tr *ngFor="#booking of bookingHistory; #i = index"> 

Au lieu de

<tr *ngFor="let booking of bookingHistory; let i = index"> 

Answer 4

Il est parce que votre bookingHistory.length > currentBookings.length, donc après une itération currentBookings[i] est outofrange et devient undefined.

Assurez-vous de répéter sur le tableau currentBookings jusqu'à ce que ce soit le dernier index., Ou faites en sorte que les deux tableaux soient égaux en longueur.

à itérer sur currentBookings vous pouvez utiliser <ng-container> qui ne rend pas réellement sur HTML