我正在每个 API 上的每个 HTTP Request 和 HTTP Response 上实现Show Spinner，现在我想以数字显示微调框，表示完成了多少响应，我想以数字形式计算响应，以便如何实现我不知道的代码，这里是我的代码。

这是我的 loader.interceptor.ts

// loader.interceptors.ts
import { Injectable } from '@angular/core';
import {
    HttpErrorResponse,HttpResponse,HttpRequest,HttpHandler,HttpEvent,HttpInterceptor
} from '@angular/common/http';
import { Observable } from 'rxjs';
import { LoaderService } from './loader.service';

@Injectable()
export class LoaderInterceptor implements HttpInterceptor {
    private requests: HttpRequest<any>[] = [];

    constructor(private loaderService: LoaderService) { }

    removeRequest(req: HttpRequest<any>) {
        const i = this.requests.indexOf(req);
        if (i >= 0) {
            this.requests.splice(i,1);
        }
        this.loaderService.isLoading.next(this.requests.length > 0);
    }

    intercept(req: HttpRequest<any>,next: HttpHandler): Observable<HttpEvent<any>> {

        this.requests.push(req);
        console.log("No of requests--->" + this.requests.length);
        this.loaderService.isLoading.next(true);
        return Observable.create(observer => {
            const subscription = next.handle(req)
                .subscribe(
                    event => {
                        if (event instanceof HttpResponse) {
                            this.removeRequest(req);
                            observer.next(event);
                        }
                    },err => {
                        alert('error returned');
                        this.removeRequest(req);
                        observer.error(err);
                    },() => {
                        this.removeRequest(req);
                        observer.complete();
                    });
            // remove request from queue when cancelled
            return () => {
                this.removeRequest(req);
                subscription.unsubscribe();
            };
        });
    }
}

这是我的 loader.component.html

<!-- loader.component.html -->
<div class="progress-loader" [hidden]="!loading">
    Loading...
</div>

这是我的 loader.component.ts

//loader.interceptor.ts
      import { Component,OnInit } from '@angular/core';
      import { LoaderService } from '../loader.service';

      @Component({
        selector: 'app-loading',templateUrl: './loading.component.html',styleUrls: ['./loading.component.css']
      })
      export class LoaderComponent implements OnInit {

        loading: boolean;
        constructor(private loaderService: LoaderService) {
          this.loaderService.isLoading.subscribe((v) => {
            console.log(v);
            this.loading = v;
          });
        }
        ngOnInit() {
        }
      }

这是我的 app.component.html

<app-loading></app-loading>

这是我的微调图像

我的期望是显示微调框，其中的百分比表示请求API时加载了多少响应。

例如： 40％负载中的100％是通过响应完成的 我从Internet和stackoverflow搜索了很多资源，但没有得到正确的实现，因此您可以针对该主题提供一些解决方案