单击一个按钮会触发具有相同事件功能的其他按钮答案

【问题标题】：Clicking on a button fires other button which holds same event function单击一个按钮会触发具有相同事件功能的其他按钮
【发布时间】：2019-03-20 14:40:48
【问题描述】：

我正在开发一个离子项目，并且在我的项目中，当我单击 1 个按钮时，其他按钮也会更改它们的值，因为它们具有相同的事件。但我想要相反，点击一个按钮应该只改变一个特定按钮的值。

HTML

<table class="student_list">
  <tr><ion-item *ngFor="let record of data">
        <ion-avatar slot="start">
          <img src="assets/student.png">
        </ion-avatar>
        <ion-label class="text2">{{record.name}}&ensp;{{record.id}}
        <span class="button1"><button (click)="toggleBackgroundColor()" ion-button [style.background-color]="hexColor" class="btn">{{text}}</button></span>
        </ion-label>
      </ion-item></tr>
    </table>

TS 文件

public toggleBackgroundColor(): void {
   if(this.hexColor === '#1e90ff') { 
     this.hexColor = '#ff0000'
     this.text='A';
   } else {
    this.hexColor = '#1e90ff';
     this.text = 'P'
  }   }

【问题讨论】：

如果您将相同的变量绑定到 2 个不同的按钮，则一个按钮的任何更改都将反映在这两个按钮上。您可以为不同的按钮使用不同的变量

标签： angular ionic-framework angular7 ionic4

【解决方案1】：

您很可能对两个按钮使用相同的绑定。您必须使用 2 组单独的绑定 - 每个按钮一组。

【讨论】：

【解决方案2】：

您应该在函数调用上放置一个标识符，以指向您正在调用调用的特定标签。

<button id="changeable" (click)="toggleBackgroundColor('changeable')" ion-button [style.background-color]="hexColor" class="btn">{{text}}</button>

以及功能：

public toggleBackgroundColor(id): void {
      var element = document.getElementById(id);
      if(element.hexColor === '#1e90ff') { 
        element.hexColor = '#ff0000'
        element.text='A';
      } else {
        element.hexColor = '#1e90ff';
        element.text = 'P'
      }   }

【讨论】：

我可以提及 id，但是当我在其中使用循环语句时，我将如何做到这一点？
增加循环内的 id 并附加它，类似于 id="clickable{{$iteration}}" 或 Angular 中的任何等价物。它将呈现为 id="clickable1"、id="clickable2" 等。

【解决方案3】：

您可以使用一个参数来区分按钮。例如，

(click)="toggleBackgroundColor(1)"

将用于一个按钮和

(click)="toggleBackgroundColor(2)"

将用于其他。然后函数变成：

public toggleBackgroundColor(who: number): void {
   switch(who) {
       case 1: /// I'm one button
       break;
       case 2: /// I'm another :)
       break;
   }
}

【讨论】：

【解决方案4】：

我认为您的其他按钮使用相同的 hexColor 变量。因此，当您修改 hexColor 时，它会更新绑定在 hexColor 上的每个按钮的属性。

我建议你重构你的代码直接修改 DOM。

<button (click)="toggleBackgroundColor($event)" 
        ion-button 
        [style.background-color]="hexColor" 
        class="btn">{{text}}
</button>


public toggleBackgroundColor(event): void {
      let btnColor = event.srcElement.style['background-color'];
      if (btnColor === '#1e90ff') { 
        btnColor = '#ff0000';
        event.srcElement.innerHTML= 'A';
      } else {
        btnColor = '#1e90ff';
        event.srcElement.innerHTML = 'P';
      }
 }

【讨论】：