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如何处理事件（事件冒泡）有关。

简而言之，您可以这样做：

传递事件并调用stopPropagation方法，如下所示。

在 .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>

单击特定的离子项目按钮会触发其他按钮

1 个答案: