如何在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，这只是clicked元素的引用。

然后你的功能应该像下面一样。

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>

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