Question

我有一些看起来像这样的HTML：

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

然后我有一个看起来像这样的js文件：

 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);
    }

这会产生一个我很棒的城市列表。我知道想要点击一个城市，我希望它能够提醒我点击了哪个城市，但我的方法无效。我怎么能这样做？

Answer 1

抱歉，我不知道<ion-list>因为我没有使用 Ionic Framework 。

注意：我已将其替换为<ul><li>。

的 check demo

<ul> <li (click)='handleClick(item, i)' *ngFor="#item of items;#i = index"> {{ item }} </li> </ul> handleClick(val, i){ console.log(val + i); }

Answer 2

你做得对，只需要在typescript文件中添加方法/函数（angular2的控制器），并且还有一件事传递item以及这样的参数：

<ion-list>
  <ion-item (click)='handleClick($event, i, item)' *ngFor="#item of items #i=index">
    {{ item }}
  </ion-item>
</ion-list>

// In the controller part do this

handleClick(event, index, item){
   alert(item);
   console.log(event, item, index);
}

如果不需要，则无需传递索引（i）。

Answer 3

为了提高效率，我会在父元素// XAxis settings graph.getXAxis().setPosition(XAxis.XAxisPosition.BOTTOM); graph.getXAxis().setLabelsToSkip(0); // and // make the line smooth graph.getLineData().getDataSets().get(0).lineDataSet.setDrawCubic(true);上使用一个事件处理程序，并利用事件冒泡：

ion-list

我还没有用Ionic测试过，所以我不知道它是否会起作用。此 Plunker 使用<ion-list (click)='handleClick($event.target.textContent)'> <ion-item *ngFor="#item of items"> {{ item }} </ion-item> </ion-list> handleClick(city){ alert(city); }和<ul>代替Ionic标签。

Angular2点击循环项目并获取它的内容

3 个答案: