The issue to open an item from a list

Ionic Framework ionic-v3
1

I need to click an item in a list several times to make it work. The code is very simple:

Html:

<ion-item *ngFor="#item of items" (click)="itemSelected(item)">
  <h3>{{item.title}}</h3>
  <p>{{item.body}}</p>
</ion-item>

Javascript:

itemSelected(item) {
this.nav.push(DetailsPage);
}

What is the reason? Thanks.

2

Your code looks just fine, so problem should be somewhere else.

3

Does all clicks send to DetailsPage without caring for the item?

That’s just an observation and is not related to the issue.

4

You should use a button for clickable items:

<button ion-item *ngFor="#item of items" (click)="itemSelected(item)">
  <h3>{{item.title}}</h3>
  <p>{{item.body}}</p>
</button>
5

Thanks. It works. I learned that the ion-item should never been used for clickable item. Thanks.

6

That’s funny, i do use the ion-item component with a click event attached and it works very good, why shouldn’t ion-item be used or what’s the advantage over the button approach?

7

Yeah, I feel strange too. I used ion-item for clickable items in my ionic 1 project without any problem.

8

I actually have them all over my app and it works like a charm.

9

You mean ionic 2 project? And you test them on device? It’s fine for me in browser.

10

I actually i’m almost ready to deploy in Google Play, tested in emulator and device.

11

Ok, that’s weird. By the way, I tested only in my iPhone with ionic 2.0.0 beta 17.

12

Oh maybe because i’m using Android for now?

13

Btw that’s the ionic CLI version, the framework is still in alpha, alpha.53 in the moment i write this.