英文:
Create button spinner when clicked in angular 6 without service call
问题
我想在下载PDF文件时显示和隐藏旋转器。
我的代码如下：这是我的HTML组件代码
<div>
<ng-container *ngFor="let p of selectedStudent.photos.list; let i = index">
<div *ngIf="p.eventName === 'FLIPBOOK'; then ifcondition"></div>
<ng-template #ifcondition>
<div class="flipbook-img">
<button class="btn btn-primary isLoadSpring" [disabled]="isLoadingSpring" (click)="downloadMyFile(selectedStudent.schoolId)">
<!-- <i class="fa fa-file-pdf-o"></i> -->
<i class="fa fa-spinner fa-spin" *ngIf="isLoadingSpring"></i> Download
</button>
<img [src]="getImageForFlipBook(1, p.imageUrl, p.rotationAngle, 300)" class="photoimges" />
</div>
</ng-template>
</ng-container>
</div>
我的.ts代码。
downloadMyFile(id: number) {
this.isLoadingSpring = true;
const link = document.createElement('a');
link.setAttribute('target', '_blank');
link.setAttribute('href', '/assets/files/' + id + '/Year-Book.pdf');
link.setAttribute('download', 'Year-Book.pdf');
document.body.appendChild(link);
link.click();
link.remove();
}
当我点击按钮时，旋转器会显示，文件会下载，但我的旋转器仍然没有停止。请帮助我。
英文:
I want to show and hide spinner when i download the pdf file.
My code is as below:-This is my Html component code
<div >
<ng-container *ngFor="let p of selectedStudent.photos.list;let i = index">
<div *ngIf="p.eventName === 'FLIPBOOK'; then ifcondition "></div>
<ng-template #ifcondition>
<div class="flipbook-img" >
<button class="btn btn-primary isLoadSpring" [disabled]="isLoadingSpring" (click)="downloadMyFile(selectedStudent.schoolId)">
<!--<i class="fa fa-file-pdf-o"></i>-->
<i class="fa fa-spinner fa-spin" *ngIf="isLoadingSpring"></i>Download
</button>
<img [src]="getImageForFlipBook(1,p.imageUrl,p.rotationAngle,300)" class="photoimges" />
</div>
</ng-template>
</ng-container>
</div>
My .ts code.
downloadMyFile(id: number) {
this.isLoadingSpring = true;
const link = document.createElement('a');
link.setAttribute('target', '_blank');
link.setAttribute('href', '/assets/files/' + id + '/Year-Book.pdf');
link.setAttribute('download', 'Year-Book.pdf');
document.body.appendChild(link);
link.click();
link.remove();
}
when i click button spinner is a display and file is download but still my sppiner is not stop . Kindly help me
答案1
得分: 0
取消链接移除后的 this.isLoadingSpring。
downloadMyFile(id: number) {
this.isLoadingSpring = true;
const link = document.createElement('a');
link.setAttribute('target', '_blank');
link.setAttribute('href', '/assets/files/' + id + '/Year-Book.pdf');
link.setAttribute('download', 'Year-Book.pdf');
document.body.appendChild(link);
link.click();
link.remove();
this.isLoadingSpring = false;
}
英文:
Unset this.isLoadingSpring after link removal.
downloadMyFile(id: number) {
this.isLoadingSpring = true;
const link = document.createElement('a');
link.setAttribute('target', '_blank');
link.setAttribute('href', '/assets/files/' + id + '/Year-Book.pdf');
link.setAttribute('download', 'Year-Book.pdf');
document.body.appendChild(link);
link.click();
link.remove();
this.isLoadingSpring = false;
}
答案2
得分: -1
async downloadMyFile(id: number) {
this.isLoadingSpring = true;
const link = document.createElement('a');
link.setAttribute('target', '_blank');
link.setAttribute('href', '/assets/files/' + id + '/Year-Book.pdf');
await link.setAttribute('download', 'Year-Book.pdf');
document.body.appendChild(link);
link.click();
link.remove();
await this.delay(3000);
this.isLoadingSpring = false;
}
private delay(ms: number) {
return new Promise(resolve => setTimeout(resolve, ms));
}
英文:
I had done changes in my code :
async downloadMyFile(id: number) {
this.isLoadingSpring = true;
const link = document.createElement('a');
link.setAttribute('target', '_blank');
link.setAttribute('href', '/assets/files/' + id + '/Year-Book.pdf');
await link.setAttribute('download', 'Year-Book.pdf');
document.body.appendChild(link);
link.click();
link.remove();
await this.delay(3000);
this.isLoadingSpring = false;
}
private delay(ms: number) {
return new Promise(resolve => setTimeout(resolve, ms));
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论