如何检查当前http请求是否活跃?

Question

我需要你的帮助。我正在尝试执行一个http post请求，并且根据它是否正在发生(活动)或已经发生，我想显示一个progress-bar。为此，我使用Angular Material库。下面的代码，我尝试这样做，我没有得到任何错误，但不幸的是，我只得到最终结果:progress-bar值:100和消息，我有一切加载。当我有请求(待处理)时，我的进度条和消息不会改变。我有什么问题?为什么进度条和消息没有变化?非常感谢

HTML

<div>
<p #message> {{ messageDownloadData }} </p>
<mat-progress-bar mode="determinate" value="0" *ngIf="isLoading === false && isLoaded === false"></mat-progress-bar>
<mat-progress-bar mode="indeterminate" *ngIf="isLoading === true && isLoaded === false"></mat-progress-bar>
<mat-progress-bar mode="determinate" value="100" *ngIf="isLoading === false && isLoaded === true"></mat-progress-bar>
<button (click) = "downloadData()"> Save </button>
</div>

手稿

public isLoading: boolean = false;
public isLoaded: boolean = false;
public messageDownloadData: string;
ngOnInit(): void {
this.messageDownloadData = 'Click to download connections';
}
public downloadData() {
this.service.downloadData(body).subscribe(res => {
this.isLoading = true;
if (this.isLoading === true || !res) {
//doesn`t work
this.renderer.addClass(this.messageInfoParagraph.nativeElement, 'inProgress_pulsating_message');
this.messageDownloadData = `Operation in progress`;
}
if (res) {
this.isLoading = false;
this.isLoaded = true;
this.renderer.removeClass(this.messageInfoParagraph.nativeElement, 'inProgress_pulsating_message');
this.messageDownloadData = 'Connections has been downloaded';
}
})
}

服务

public downloadData(body: any): Observable<any> {
return this.http.post(url, body);
}

Answer 1

在订阅块中设置isLoading。将其移到函数体中，以便在调用之前设置。

public downloadData() {
this.isLoading = true; // <-- MOVE ME TO HERE
this.service.downloadData(body).subscribe(res => {
// MOVE ME FROM HERE
if (this.isLoading === true || !res) {
//doesn`t work
this.renderer.addClass(this.messageInfoParagraph.nativeElement, 'inProgress_pulsating_message');
this.messageDownloadData = `Operation in progress`;
}
if (res) {
this.isLoading = false;
this.isLoaded = true;
this.renderer.removeClass(this.messageInfoParagraph.nativeElement, 'inProgress_pulsating_message');
this.messageDownloadData = 'Connections has been downloaded';
}
})
}