单击特定按钮时，微调器会为每个按钮加载

Question

我在一个用作下载按钮的按钮内实现了一个离子旋转器和一个图标。当页面加载时，只有下载图标可见，当用户单击它时，下载图标隐藏，微调器显示。我已经使用 ngFor 显示多个下载按钮。

我在单击特定按钮时遇到问题，所有微调器开始加载，而不是特定按钮微调器。

这是我的代码

          <ion-list>
            <div class="chip" *ngFor="let attachment of Trade.attachment">
              <div class="chip-content">
                <ion-label style="font-weight: 500;">{{attachment.attachment_file_name}}</ion-label>
              </div>
              <div class="chip-close">
                <button  #downloadButton ion-button clear color="dark"
                  (click)="download(attachment.attachment_file_name,attachment.attachment_id,downloadButton.isLoading = true)">
                  <ion-icon name="arrow-down" md="md-arrow-round-down" *ngIf="!downloadButton.isLoading" color="primary"></ion-icon>
                  <ion-spinner class="downloadspinner" name="crescent" *ngIf="downloadButton.isLoading"> </ion-spinner>
                </button>
              </div>
            </div>
          </ion-list>

我已经尝试了这个的解决方案。它可以工作，但是当我的功能完成时我无法停止微调器。

如何加载特定于按钮的微调器？

Answer 1

而不是 downloadButton.isLoading 使用 attachment.isLoading 。这将在单击按钮时将数据存储在行中

在附件中创建一项作为正在加载。默认值为 false。当您单击按钮时将其设置为 true 并在过程完成后再次将其设置为 false。

像下面这样更改它。无需将 isLoading 传递给函数。我已将其更改为行。有了它，您可以将该特定行值更改为 false。

(click)="download(attachment.attachment_file_name,attachment.attachment_id, attachment);attachment.isLoading = true;"

在你的打字稿函数中

download(file, id, attachement_row) {
    //Once your downloading done
    attachement_row.isLoading = false;
}

单击特定按钮时，微调器会为每个按钮加载

Spinner loads for every button when clicked on a specific button

angular

typescript

ionic-framework

ionic3