Question

我有两个数组如下：

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

它们都在代码中进一步填充。 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>

因此，这完全符合预期，但currentBookings[i][0]的每一行都会在控制台中触发此错误。

ERROR TypeError: Cannot read property '0' of undefined

我错过了会导致我未来悲伤的事情吗？

更新：

bookingHistory 是一系列预订，如下所示：[{…}, {…}, {…}]

Booking的结构如下：

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

currentBookings 如下：[[{…}], [{…}], [{…}]]

Answer 1

这是因为您的bookingHistory.length > currentBookings.length，因此经过一段时间的迭代currentBookings[i] outOfRange 后变为undefined。

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

要对currentBookings进行迭代，您可以使用实际上无法在HTML上呈现的<ng-container>

Answer 2

最终是一个异步问题。

在填充的第二个数组之间的一秒中，TypeError: Cannot read property '0' of undefined错误被多次触发，尽管它呈现给屏幕似乎很好。

通过添加计数器和boolean变量来确保在渲染屏幕之前已填充第二个数组。并用它包装模板。

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

它现在可以正常运行。

Answer 3

似乎可能是语法错误，在模板中声明变量时缺少分号：

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

您也可以共享变量currentBookings的值，需要查看其结构以调试错误。

Answer 4

试试这个：

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

而不是

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

TypeError：无法读取属性＆＃39; 0＆＃39;未定义但工作正常

4 个答案: