जब मैं फ़ाइल डाउनलोड करने के लिए क्लिक करता हूं तो मैंने एक स्पिनर सेट करने का प्रयास किया। हालांकि, स्पिनर केवल एक क्लिक की बजाय तालिका पंक्ति में सभी डाउनलोड की गई फ़ाइलों के लिए लोड होता है।

फ़ाइल डाउनलोड करने के लिए क्लिक करने से पहले यहां छवि विवरण दर्ज करें

फ़ाइल डाउनलोड करने के लिए क्लिक करने के बाद यहां छवि विवरण दर्ज करें

एचटीएमएल

 <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);
 }
1
Augustine 21 नवम्बर 2019, 09:32

4 जवाब

सबसे बढ़िया उत्तर

इस तरह प्रयास करें:

वर्किंग डेमो< /मजबूत>

.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);
  }
2
Adrita Sharma 21 नवम्बर 2019, 09:53

documentFiles ऑब्जेक्ट में isLoading ध्वज जोड़ें। फिर यह अलग-अलग पंक्तियों के लिए काम करेगा।

0
akpgp 21 नवम्बर 2019, 09:45

isLoading आपकी तालिका की सभी पंक्तियों में साझा किया जाता है। आपको इसे अपने पंक्ति डेटा जैसे documentFiles.isLoading पर उपयोग करना चाहिए।

0
Buzzinga 21 नवम्बर 2019, 09:44

अपने घटक में loadingDocument: string; परिभाषित करें।

this.isLoading = true; के बजाय, this.loadingDocument = id आज़माएं;

और this.isLoading = false; को this.loadingDocument = null से बदलें

और *ngIf="!isLoading" को *ngIf="documentFiles.id === loadingDocument" से बदलें

2
Wandrille 21 नवम्बर 2019, 09:44