离子如何识别 *ngFor 循环中的单击按钮答案

【问题标题】：ionic how to identify clicked button in a *ngFor loop离子如何识别 *ngFor 循环中的单击按钮
【发布时间】：2017-10-20 08:37:01
【问题描述】：

我正在创建一个文本和按钮列表。我想确定在 clicked 函数中点击了哪个按钮。

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>

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

【问题讨论】：

如果您只关心所选元素的索引，请将index 作为参数传递，例如 SelectClicked(index)

标签： html button ionic-framework

【解决方案1】：

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

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

您可以使用 event.target、event.srcElement 或 event.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>

【讨论】：

【解决方案2】：

您可以像这样将“act”值作为参数传递给函数

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

【讨论】：