CODEWITHSUNDEEP
javascriptangular
Vinu Vish
Vinu Vish

Reputation: 153

Getting TypeError in Angular 2

Following is my Angular 2 code:

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

When I use the menuData[i].image the list will be populate image from array list one by one, but when I use menuData[i+1].image I'm getting error:

Screenshot of error

Upvotes: 1

Views: 65

Answers (1)

Alexander Staroselsky
Alexander Staroselsky

Reputation: 38847

Try targeting item.image instead of menuData[i].image as you are already looping over menuData array items and don't need to target the index, you have the full item object available on each iteration.

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

The reason you are getting undefined error is because with menuData[i+1].image on the last iteration of the loop, effectively index i is out of bounds and targets an invalid item. Are you trying to display the image from the next item of the array on the current item?

I've created a simple plunker demonstrating the different approaches to targeting the item in the *ngFor. You can use the safe navigation operator (?.) to only try accessing an object property if it exists, and display/outputting null otherwise. In the plunker, notice how the last iteration outputs null as the index [i + 1] does not have a correlating item in menuData to retrieve.

*ngFor is simply iterating over each item in array menuData using for...of, in this case creating a template input variable called item. menuData[i+1] will always cause an error on the last iteration of let item of menuData. If the array has 3 items for example, trying to access index 3 (on last iteration of loop) will cause an error, there is no item/object at index 3. The last numerical index of an array of 3 items would be 2. In Java this would be IndexOutOfBoundsException, in C# this would be IndexOutOfRangeException, etc. You simply cannot access properties of an item that doesn't exist, that is why the error is occurring. The plunker shows the current index and next index, everything is technically fine until the last iteration of the *ngFor.

Hopefully that helps!

Upvotes: 1

Related Questions