javascript - 在 Angular 2 中获取 TypeError

Question

以下是我的 Angular 2 代码:

    <ion-grid *ngFor="let item of menuData;  let i = index; " ng-init="getAllItemToGrid()">
    <img src="{{'assets/Products/'+menuData[i].image}}" ng-click="onLogin()" width="100%">
    <a class="item item-icon-right assertive" style="border-width: 0px; border-style: none;">
      <p ng-click="" style="font-size: 12px;text-align:left; padding-left: 10px">
        {{menuData[i].name}}<br/>
        <span style="font-weight: bold;color: black;">&#8364; {{i+1 < menuData.length}}</span>
      </p>
      <button ion-button (click)="addToCart(item)" type="submit" color="danger" icon-left block style="width:150px;  height: 25px;">
     <ion-icon ios="ios-cart" style="position: absolute;left:5%;"></ion-icon>
      <p> &emsp; ADD TO CART</p>
    </button>
    </a>
  </ion-col>

当我使用 menuData[i].image 时，列表将从数组列表中一张一张地填充图像，但是当我使用 menuData[i+1].image 我收到错误:

Answer 1

尝试定位 item.image而不是 menuData[i].image因为你已经在遍历 menuData数组项并且不需要以索引为目标，你有完整的 item每次迭代都可用的对象。

<ion-grid *ngFor="let item of menuData;  let i = index; " ng-init="getAllItemToGrid()">
    <img src="{{'assets/Products/'+ item.image}}" ng-click="onLogin()" width="100%">
...

你得到 undefined 的原因错误是因为 menuData[i+1].image在循环的最后一次迭代中，有效索引 i超出范围并以无效项目为目标。您是否尝试显示下一个 中的图像item当前 item 上的数组？

我创建了一个简单的 plunker演示针对 item 的不同方法在*ngFor .您可以使用 safe navigation operator (?.)仅尝试访问存在的对象属性，并显示/输出 null否则。在plunker ，请注意最后一次迭代如何输出 null作为索引[i + 1]没有相关的 item在 menuData检索。

*ngFor只是遍历数组 menuData 中的每个项目使用 for...of ，在本例中创建一个名为 item 的模板输入变量 . menuData[i+1]总是会在 let item of menuData 的最后一次迭代中导致错误.例如，如果数组有 3 个项目，尝试访问索引 3 (在循环的最后一次迭代中)会导致错误，没有 item/索引处的对象 3 . 3 项数组的最后一个数字索引将是 2 .在 Java 中，这将是 IndexOutOfBoundsException ，在 C# 中这将是 IndexOutOfRangeException等。您根本无法访问不存在的项目的属性，这就是发生错误的原因。 plunker显示当前索引和下一个索引，技术上一切都很好，直到 *ngFor 的最后一次迭代.

希望对您有所帮助!