Question

我正在处理一个离子项目，并且在我的项目中，当我单击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'
  }   }

Answer 1

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

Answer 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'
      }   }

Answer 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;
   }
}

Answer 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';
      }
 }

单击一个按钮会触发另一个具有相同事件功能的按钮

4 个答案: