ionic 如何识别 *ngFor 循环中单击的按钮

Question

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

超文本标记语言

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

Answer 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>