如何在 console.log 中获取点击的按钮值

Question

我有三个按钮，我想要我将要单击的那个按钮的值。我已经完成了一些代码。请帮助我，因为我是 Ionic 的新手。

文件名：Donate.html

<ion-grid>
<ion-row>
  <ion-col col-6 >
    <button ion-button #ref (click)="addDetails(ref.value)" name="masjid" id="1" value="masjid" full block>
      Masjid
    </button>
  </ion-col>
  <ion-col col-6 >
    <button ion-button #ref (click)="addDetails(ref.value)" name="school" id="2" value="school" full block>
      School
    </button>
  </ion-col>
</ion-row>
<ion-row>
  <ion-col col-12 >
    <button ion-button name="fitrana" id="3" value="fitrana" #ref (click)="addDetails(ref.value)" full block>
      Fitrana
    </button>
  </ion-col>
</ion-row>
</ion-grid>

文件名：Donate.ts

addDetails(value) {
console.log("value:",value);
}

现在，当我点击任何按钮时，它会显示未定义的值。请帮助我谢谢。

Answer 1

请进行以下更改。

首先你需要改变你的点击功能。它应该像下面一个 -

<ion-grid>
<ion-row>
  <ion-col col-6 >
    <button ion-button #ref (click)="addDetails($event)" name="masjid" id="1" value="masjid" full block>
      Masjid
    </button>
  </ion-col>
  <ion-col col-6 >
    <button ion-button #ref (click)="addDetails($event)" name="school" id="2" value="school" full block>
      School
    </button>
  </ion-col>
</ion-row>
<ion-row>
  <ion-col col-12 >
    <button ion-button name="fitrana" id="3" value="fitrana" #ref (click)="addDetails($event)" full block>
      Fitrana
    </button>
  </ion-col>
</ion-row>
</ion-grid>

在click函数中传递$event，它只是被点击元素的引用。

那么你的函数应该如下图所示。

addDetails(value) {
console.log("value:",value.currentTarget.name);
}

Answer 2

我建议的最简单方法是像您一样在点击时添加一个函数，并将代表按钮的值传递给函数，例如

<button (click)="addDetails('button1')>...</button>
<button (click)="addDetails('button2')>...</button>
<button (click)="addDetails('button3')>...</button>

然后您可以在函数中获取这些值以在控制台中打印它

如何在 console.log 中获取点击的按钮值

How to get clicked button value in console.log

ionic3

angular6