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>

---

isLoading

在表中的所有行上共享。您应该在行数据上使用它，如

文档文件。isLoading

isLoading

在表中的所有行上共享。您应该在行数据上使用它，如

documentFiles.isLoading

定义

loadingDocument:string在您的组件中

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

并替换
this.isLoading=false
by
this.loadingDocument=null

并将
*ngIf=“！isLoading”
替换为
*ngIf=“documentFiles.id==loadingDocument”
定义
加载文档：字符串在您的组件中

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

并替换
this.isLoading=false
by
this.loadingDocument=null

并将
*ngIf=“！isLoading”
替换为
*ngIf=“documentFiles.id==loadingDocument”
在
documentFiles
对象中添加
isLoading
标志。然后它将对单个行起作用。
在
documentFiles
对象中添加
isLoading
标志。然后它将对单个行起作用。
尝试如下操作：

 <i [ngClass]="isLoadingFileId == documentFiles.id ? 'fas fa-spinner fa-spin' : 'far fa-file-pdf'"></i>


.html

试着这样做：

 <i [ngClass]="isLoadingFileId == documentFiles.id ? 'fas fa-spinner fa-spin' : 'far fa-file-pdf'"></i>


.html

这可能是因为所有
td
共享相同的
isLoading
属性，您需要重构代码。这可能是因为所有
td
共享相同的
isLoading
属性，您需要重构代码。两种方法都尝试过，效果都很好。谢谢你，这两种方法都很好用。谢谢你，阿德里塔和瑞尔，你的回答很中肯。我不得不调整一些东西，砰！它也起作用。谢谢，伙计。旺德里尔，你的回答很中肯。我不得不调整一些东西，砰！它也起作用。谢谢，伙计。
 <i [ngClass]="isLoadingFileId == documentFiles.id ? 'fas fa-spinner fa-spin' : 'far fa-file-pdf'"></i>

  isLoadingFileId: number;

  download(id: number, attachedName: string) {
    this.isLoadingFileId = id;
    this.newCustomerDocumentService.download(id, attachedName);
    setTimeout(() => {
      this.isLoadingFileId = null;
    }, 4000);
  }