点击

Question

单击下载文件时，我试图设置微调器。但是，微调器将为表行中的所有下载文件加载而不是仅单击一个。

单击以下载文件之前

点击下载文件后

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中下载方法的代码

download.ts

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

Answer 1

在组件中定义loadingDocument: string;。

尝试使用this.isLoading = true;代替this.loadingDocument = id;

然后将this.isLoading = false;替换为this.loadingDocument = null

然后将*ngIf="!isLoading"替换为*ngIf="documentFiles.id === loadingDocument"

Answer 2

尝试这样：

Working Demo

.html

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

您可以像这样重构图标类：

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

.ts

  isLoadingFileId: number;

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

Answer 3

isLoading在表的所有行上共享。您应该在documentFiles.isLoading之类的行数据中使用它。

Answer 4

在isLoading对象中添加documentFiles标志。然后它将适用于单个行。