Javascript TypeError:无法读取属性'；0'；未定义的，但工作良好

我有两个数组，如下所示：

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

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

它们都在代码的后面填充

bookingHistory

是一个

Booking

数组，

currentBookings

有一个

Booking

数组

我的html模板包含以下内容：

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

我是否错过了一些会让我未来悲伤的事情

更新：

bookingHistory是一个如下的预订数组：

[{…}，{…}，{…}]

预订的结构如下所示：

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

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

鉴于currentBookings如下所示：
[[[{…}]、{…}]、{…}]
这可能是语法错误，但在模板中声明变量时缺少分号：

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


试试这个：

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



而不是

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

这是因为您的
bookingHistory.length>currentBookings.length
，所以经过一段时间的迭代后，
currentBookings[i]
超出范围，变得
未定义

确保在
currentBookings
数组上迭代，直到最后一个索引，或者使两个数组的长度相等

要在
currentBookings
上迭代，您可以使用
，它实际上不会在HTML上呈现，这最终是一个异步问题

在填充的第二个数组之间的几秒钟内，多次触发了undefined

错误的

TypeError:Cannot read属性“0”，尽管它在屏幕上呈现得似乎很好

通过添加计数器和
布尔
变量来修复此问题，以确保在呈现屏幕之前已填充第二个数组。并用它包装模板

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


{{预订？.level}
{{预订？.date}
{{预订？.room}
是
{{预订？.am_dept}}
{{预订？.am_surg}}
{{currentBookings[i][0]？.level}
{{currentBookings[i][0]？.date}
{{currentBookings[i][0]？.room}
是
{{currentBookings[i][0]？.am_dept}
{{currentBookings[i][0]？.am_surg}

它现在可以正常工作，没有错误。
您能确认
currentBookings
是一个数组数组吗？如果它是1D数组，请尝试
currentBookings[i]
only@anoop更新。事实上，它们的长度和填充方式是相同的，它们永远不会被忽略。不幸的是，事实并非如此。请尝试声明
currentBookings:any[][]=[[]]作为多维感谢您的帮助。如果你对最后的问题感兴趣，我会补充一个答案。我不知道
，所以谢谢你。如果我错了，请纠正我，但这不仅仅是一种过时的声明局部变量的方式吗？这就是
让
已经在做的事情。不管怎样，它都不会运行。