Нажатие на определенную кнопку элемента иона вызывает другие кнопки

Question

Предположим, что в массиве names есть 3 элемента.Таким образом, в приведенном ниже html будут отображаться 3 элемента с прикрепленной кнопкой к каждому элементу.

.html

<ion-item *ngFor="let name of names">

   <p>{{name.username}}</p>

   <button ion-button [someAttribute]="isLoad" (click)="clickTest(name.id)">
      Click
   </button>

</ion-item>

.ts

async clickTest(id) {

     isLoad = true;
    // await server side call
    isLoad = false;
}

Требование : Я хочу, чтобы конкретная кнопка менялась только с isLoad = true, а не всеми кнопками. Проблема : При нажатии на кнопку Click другие кнопки также изменяются.

Answer 1

Это связано с тем, как Javascript обрабатывает события (Event Bubbling).

Короче говоря, вы можете сделать это:

Передача события и вызов метода stopPropagation, как здесь.

In .html

<ion-item *ngFor="let name of names">

   <p>{{name.username}}</p>

   <button ion-button [someAttribute]="isLoad" (click)="clickTest($event, name.id)">
      Click
   </button>

</ion-item>

.ts

async clickTest(event:any, id) {
     event.stopPropagation();

     isLoad = true;
    // await server side call
    isLoad = false;
}

или вызовите такой метод в шаблоне:

В .html

<ion-item *ngFor="let name of names">

   <p>{{name.username}}</p>

   <button ion-button [someAttribute]="isLoad" (click)="clickTest(name.id), $event.stopPropagation()">
      Click
   </button>

</ion-item>