加载微调器会在页面上的每个按钮上激活答案

【问题标题】：Loading Spinner activates on every button on the page加载微调器会在页面上的每个按钮上激活
【发布时间】：2018-09-24 15:33:01
【问题描述】：

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

我该如何纠正这个问题？

我的代码：

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

其他按钮类似...

图片向您展示我的意思：

【问题讨论】：

可能是因为所有按钮都使用组件中相同的loading 属性？可以为包含这些按钮的组件添加代码吗？
是的，没错。所有按钮都使用相同的加载属性。但是按钮是动态加载的，所以我不能提供独特的属性。有什么想法吗？
你使用 ngFor 来生成你所有的按钮吗？在这种情况下，所有按钮的 loading 属性都是 true。
需要为按钮的每个实例创建loading 属性，您可能应该将标题、内容和按钮包装为具有加载属性的独立组件
Man.. 向我们展示你用来动态生成按钮的代码。

标签： angular typescript ionic-framework ionic3

【解决方案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>

【讨论】：

非常感谢，太好了！但是在运行一个函数后，如何在我的组件中再次将加载设置为 false？
通过将按钮作为参数传递给 onClick() 函数并将其保存到组件并在需要时重用它
myButton 不是 ID，它是模板变量。如何使用 *ngFor 动态生成？ @叶夫根