文件上传/下载时显示和隐藏 Spinner答案

【问题标题】：Show and hide Spinner when a file upload/downloads文件上传/下载时显示和隐藏 Spinner
【发布时间】：2019-11-27 10:45:16
【问题描述】：

当客户端在等待 blob 显示时单击下载文件时，我需要显示微调器。但是现在，当 ngif 设置为 !show 时，微调器会继续加载并且永不停止。反过来，如果 ngif 设置为如图所示，则在显示 blob 时背景中没有微调器。

<app-spinner *ngIf="show"></app-spinner>
    <a *ngIf="editing && !show" title="Download Book" id="downloadLink" (click)="downloadBook(myBook.id, myBook.attachedName)"> 
        {{nameAttached}}
    </a>
</app-spinner>

我设置了一个变量 show: boolean;在打字稿中。

下载方法

// method to download Book
downloadBook(id: number, attachedName: string) {
    this.downloadBookService.downloadBook(id, attachedName);
}

【问题讨论】：

您究竟在哪里设置show 变量并将其更新为true 或false？可以出示一下代码吗？
downloadBook 似乎没有根据活动开始或结束更新节目。这是类似问题的链接stackoverflow.com/questions/51000252/…

标签： angular

【解决方案1】：

取决于 downloadBook() 是否可观察：

// method to download Book
downloadBook(id: number, attachedName: string) {
    this.show = true;
    this.downloadBookService.downloadBook(id, attachedName);
    this.show = false;
}

如果是订阅，则始终在订阅 finalize 语句中设置this.show = false（这样即使发生错误它也会停止旋转）。

// method to download Book
downloadBook(id: number, attachedName: string) {
    this.show = true;
    this.downloadBookService.downloadBook(id, attachedName)
        .pipe(
            finalize(() => this.show = false) // Execute when the observable completes
        );
}

【讨论】：

【解决方案2】：

一旦收到 blob 内容，您应该将 show 的值设置为 false。

downloadBook(id: number, attachedName: string) {  
    this.downloadBookService.downloadBook(id, attachedName); 
    this.show = false;
}

理想情况下，如果 downloadBookService.downloadBook 是异步的，那么您应该使用回调函数来更新显示标志。

如下所示：

downloadBook(id: number, attachedName: string) {  
    this.downloadBookService.downloadBook(id, attachedName)
        .subscribe (resp => {
            show =false;
        });
}

【讨论】：