Question

当客户端单击以下载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);
}

Answer 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
        );
}

Answer 2

downloadBook似乎没有根据活动的开始或结束来更新节目。这是指向类似问题How to show spinner in angular 6

的链接

Answer 3

接收到Blob内容后，应将show的值设置为false。

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

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

如下所示：

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

上传/下载文件时显示和隐藏微调框

3 个答案: