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只是使用for...of遍历数组menuData中的每个项目，在这种情况下，创建一个名为item的模板输入变量。 menuData[i+1]将始终在let item of menuData的最后一次迭代中导致错误。例如，如果数组有3个项目，则尝试访问索引3（在循环的最后一次迭代中）将导致错误，索引item处没有3 /对象。 3个项目数组的最后一个数字索引是2。在Java中，这将是IndexOutOfBoundsException，在C＃中这将是IndexOutOfRangeException，等等。您根本无法访问不存在的项的属性，这就是错误发生的原因。 plunker显示当前索引和下一个索引，在*ngFor的最后一次迭代之前，技术上一切正常。

希望这有帮助！

在Angular 2中获取TypeError

1 个答案: