Javascript 获取Angular 2中的TypeError

以下是我的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>

尝试定位
项。image
而不是
menuData[i]。image
由于您已经在
menuData
数组项上循环，并且不需要以索引为目标，因此在每次迭代中都有完整的
项
对象可用

<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
超出了范围，目标是无效项。您是否正在尝试显示当前
项目
上阵列的下一个
项目
中的图像

我创建了一个简单的示例，演示了在
*ngFor
中针对
项的不同方法。您可以使用仅尝试访问存在的对象属性，否则显示/输出
null
。在中，请注意上一次迭代如何输出
null
，因为索引
[i+1]
在
menuData
中没有要检索的相关
项

只需使用在数组
menuData
中的每个项上进行迭代，在本例中创建一个名为
item
的模板输入变量
menuData[i+1]
在最后一次迭代menuData的
let项时总是会导致错误。例如，如果数组有3个项，尝试访问索引
3
（在循环的最后一次迭代中）将导致错误，索引
3
处没有
项
/object。3项数组的最后一个数字索引为
2
。在Java中，这将是
IndexOutOfBoundsException
，在C中，这将是
IndexOutOfRangeException
，等等。您无法访问不存在的项的属性，这就是发生错误的原因。显示当前索引和下一个索引，在
*ngFor
的最后一次迭代之前，技术上一切正常

希望这有帮助
 然后使用
menuData[i]。图像
…：/只是想让你知道。。。Javascript和Java不是一回事。查找：）我不能使用anguler 2 tage bcz它需要1500个声誉在我的应用程序中有一个网格视图第一列应该是第一个元素第二列应该是第二个元素这就是为什么我使用[i+1]
let i=index
从索引
0
开始，因此您不需要执行
[i+1]
。索引
0
将以第一项为目标，
1
将以下一项为目标，依此类推。这类似于Java、C#、Python等。尝试只针对
item.image
，或者如果必须的话，针对menuData[i]。image，看看它是否有效。item.image，menuData[i]。image和menuData[#]。image（#=数字）都可以正常工作，但menuData[i+1]。image不工作menuData[i+1]在menuData的
let项的最后一次迭代中总是会导致错误。例如，如果数组有3个项目，尝试访问索引
3
将导致错误，索引
3
中没有项目。如果
2
，则为3项数组的最后一个数字索引。在Java中，这将是
IndexOutOfBoundsException
，在C#中，这将是
IndexOutOfRangeException
，等等。您根本无法访问不存在的项的属性，这就是发生错误的原因。我得到了非常棒的解释，谢谢您的任何建议