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中获得单击的按钮值

2 个答案: