angular - 加载微调器在页面上的每个按钮上激活

Question

我正在尝试将加载微调器集成到按钮中。这也很好用。问题:如果我点击一个按钮，微调器将响应每个额外的按钮。

我该如何纠正这个问题？

我的代码:

<button ion-button block (click)="loading = true">
  <ion-spinner class="whiteSpinner" item-left *ngIf="loading" name="bubbles"></ion-spinner>
  Buy now - 1,49€
</button>

其他按钮一样...

图像向您展示我的意思:

Answer 1

如果你有一堆动态按钮，你可以给它们添加唯一的 id。即使您使用例如 *ngFor 来生成所有按钮，它们也将具有与本例中的 myButton 不同的唯一 ID。

<button #myButton ion-button block (click)="myButton.loading = true">
  <ion-spinner class="whiteSpinner" item-left *ngIf="myButton.loading" name="bubbles"></ion-spinner>
  Buy now - 1,49€
</button>