离子如何识别* ngFor循环中的点击按钮

时间:2017-05-20 07:33:50

标签: html button ionic-framework

我正在创建一个文本和按钮列表。 我想确定点击的功能中点击了哪个按钮。

HTML

<ion-list>
    <ion-item ion-item *ngFor="let act of questions.test">
      {{act.quote}}
      <ion-item>
        <button large ion-button item-right (click)="SelectClicked()">Select</button>
      </ion-item>
    </ion-item>
</ion-list>

TS

  this.questions =
  {
    "test":[
    {
      "quote": "first row"
    }, {
      "quote": "second row"
    }, {
      "quote": "third row"
    }, {
      "quote": "fourth row"
    }
    ]
  }


SelectClicked(detail){
//please help
// which button was clicked ( 1 to 4 ) ?
  console.log("SelectClicked" + detail);
}

2 个答案:

答案 0 :(得分:4)

我猜你想要所选元素,可以通过将事件传递给处理程序来完成。

<button (click)="SelectClicked($event)"></button>

您可以使用event.targetevent.srcElementevent.currentTarget从事件中获取元素。

但是如果你想传递索引或数组的项目,你可以传递act对象或向循环添加索引......

<ion-item ion-item *ngFor="let act of questions.test; let i = index">

...并传递对象......

<button (click)="SelectClicked(act)"></button>

...或ID

<button (click)="SelectClicked(i)"></button>

答案 1 :(得分:0)

您可以将“act”值作为参数传递给函数,如此

 <button large ion-button item-right 
  (click)="SelectClicked(act)">Select
 </button>