Angular2 click looped item and get it's contents
<p>I have some html which looks like this:</p>

<pre><code>&lt;ion-list&gt;
  &lt;ion-item (click)='handleClick($event, i)' *ngFor="#item of items"&gt;
    {{ item }}
  &lt;/ion-item&gt;
&lt;/ion-list&gt;
</code></pre>

<p>I then have a js file which looks like this:</p>

<pre><code> this.items = [
            'Amsterdam',
            'Bogota',
            'Buenos Aires',
            'Cairo',
            'Dhaka',
            'Edinburgh',
            'Geneva',
            'Genoa',
            'Glasglow',
            'Hanoi',
            'Hong Kong',
            'Islamabad',
            'Istanbul',
            'Jakarta',
            'Kiel',
            'Kyoto',
            'Le Havre',
            'Lebanon',
            'Lhasa',
            'Lima',
            'London',
            'Los Angeles',
            'Madrid',
            'Manila',
            'New York',
            'Olympia',
            'Oslo',
            'Panama City',
            'Peking',
            'Philadelphia',
            'San Francisco',
            'Seoul',
            'Taipeh',
            'Tel Aviv',
            'Tokio',
            'Uelzen',
            'Washington'
        ];

 handleClick(e, i){
        alert(e);
        alert(i);
    }
</code></pre>

<p>This produces a list of cities which I great. I know want to click on a city and I want it to alert which city was clicked, but my approach is not working. How can I do this?</p>