Нажатие на кнопку запускает другую кнопку, которая содержит ту же функцию события

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

Вы должны поставить идентификатор в вызове функции для конкретного тега, для которого вы вызываете вызов.

<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 2

Вы можете использовать параметр, который будет отличать кнопки друг от друга. Например,

(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 3

Скорее всего, вы используете одинаковые привязки для обеих кнопок. Вам придется использовать 2 набора отдельных привязок - по одному для каждой кнопки.

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