Question

我有一个ion-grid我可以拥有包含11列的x行：

<ion-grid>
    <ion-row class="row" *ngFor="let row of grid">
      <ion-col class="col" col-1 *ngFor="let file_uri of row">
         <button ion-button class='buttoncell' ion-button (click)="editEntryValue($event)">{{file_uri}}</button>
      </ion-col>
    </ion-row>
</ion-grid>

正如您所看到的，表格的单元格是按钮。在.ts文件中，我有以下内容：

editEntryValue(event: any){
    console.log(event);
}

所以我得到一个MouseEvent对象作为事件。但是当单击一个按钮时，我需要知道它来自哪一行（数字）和哪一列（数字）。我怎么能这样做？

Answer 1

您可以将索引添加到两个循环中，并在单击按钮时发送它：

<ion-grid>
    <ion-row class="row" *ngFor="let row of grid; let rowIndex=index">
      <ion-col class="col" col-1 *ngFor="let file_uri of row; let colIndex=index">
         <button ion-button class='buttoncell' ion-button (click)="editEntryValue($event, rowIndex, colIndex)">{{file_uri}}</button>
      </ion-col>
    </ion-row>
</ion-grid>

然后：

editEntryValue(event: any, rowIndex: number, colIndex: number): void {
    console.log(`Row: ${rowIndex}`);
    console.log(`Col: ${colIndex}`);
}

离子点击事件获取元素

1 个答案: