Passing ion-item value Into ion-item-options function

Ionic Framework ionic-v3
1

I’m trying to collect the array’s index value from my ion-item so I’d be able to pass it into my function in order to be able to select that particular item from my SQLite database. When I display the i value just to confirm whether its working, i get an "undefined"
Below is my code

  <ion-list>
    <ion-item-sliding>
      <ion-item *ngFor="let dev of developers; let i = index">
        <h2>{{ dev.id }} {{ dev.name }}</h2>
        <p>{{ dev.yearsOfExperience }} years of {{ dev.skill }} Experience!</p>
      </ion-item>

      <ion-item-options side="right">
        <button ion-button icon-only (click)="showId({{i+1}})">
          <ion-icon name="trash"></ion-icon>
        </button>
      </ion-item-options>

    </ion-item-sliding>
  </ion-list>
2

When you use the *ngFor microsyntax, it gets desugared into this:

<ng-template ngFor let-dev [ngForOf]="developers" let-i="index">
<ion-item>...<ion-item>
</ng-template>

Note that the scope of the ngFor is limited to the <ion-item>, so outside of that element (such as where you are trying to use it) i doesn’t exist. One thing you can do is to do the desugaring yourself and close the <ng-template> where appropriate.

3

@rapropos thanks… but I’m still a starter with Ionic and don’t fully understand your “desugaring” concept. My main goal is to have the item behave in a way such that when i slide over anyone to reveal a delete/edit button, I can use their index to target them within my database.
Is there any other way I can easily pass the index value to the function?

4

You can read all about it here.

Not that I can think of.

5

I have found a way round it… I looked at it from the scope point of view that you mentioned earlier.
I worked the *ngFor into the ion-item-sliding element so that the index exists on a global scope to my ion-item-options element.

  <ion-list>
    <ion-item-sliding *ngFor="let dev of developers; let i = index">
      <ion-item>
        <h2>{{ dev.id }}{{ dev.name }}</h2>
        <p>{{ dev.yearsOfExperience }} years of {{ dev.skill }} Experience!</p>
      </ion-item>

      <ion-item-options side="right">
        <button ion-button icon-only (click)="deleteDeveloper(i+1)">
          <ion-icon name="trash"></ion-icon>
        </button>
      </ion-item-options>

    </ion-item-sliding>
  </ion-list>
1 Like