时间戳

首页 > 解决方案 > 单击时更改图标

html - 单击时更改图标

问题描述

单击下载文件时，我尝试设置微调器。但是，微调器会加载表格行中所有下载的文件，而不仅仅是单击的文件。

点击下载文件之前 在此处输入图像描述

点击下载文件后 在此处输入图像描述

HTML

 <td class="text-center px-1">
          <a class="text-dark" title="Download document" style="cursor: pointer"
             (click)="download(documentFiles.id, documentFiles.attachedName)">
            <i *ngIf="!isLoading" class="far fa-file-pdf"></i>
            <i *ngIf="isLoading" class="fas fa-spinner fa-spin" style= color:#572364></i>
          </a>
 </td>

下面是ts中下载方法的代码

下载.ts

download(id: number, attachedName: string)
{
    this.isLoading = true;
    this.newCustomerDocumentService.download(id, attachedName);
    setTimeout(() => {
    this.isLoading = false;
   }, 4000);
 }

标签： htmlangular

解决方案

loadingDocument: string;在您的组件中定义。

而不是this.isLoading = true;，尝试this.loadingDocument = id；

并替换this.isLoading = false;为this.loadingDocument = null

并替换*ngIf="!isLoading"为*ngIf="documentFiles.id === loadingDocument"

推荐阅读