相关疑难解决方法(0)

我已经设置了一个可观察的服务来帮助我保存数据，但是我需要一种方法来在数据等待来自可观察的数据时显示加载旋转器。

我的服务：

imports [...]

import { Observable, BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class OrganisationsService {
  private organisations$ = new BehaviorSubject<Organisation[]>([
    {
      [...]
    }
  ]);

  constructor(private http: HttpClient) {
    this.http
      .get(
        environment.apicall
      )
      .subscribe((data) => this.organisations$.next(data['organisations']));
  }

  getList(): Observable<Organisation[]> {
    return this.organisations$.asObservable();
  }

这是我的组件：

    imports ...

    import UIkit from 'uikit';
    import { Observable } from 'rxjs';

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

      public loading = true;

      public organisations$: Observable<Organisation[]>; …

在这里，我编写的拦截器直接通过拦截器处理微调器

@Injectable()
export class ApiInterceptor implements HttpInterceptor {
    constructor(private _globalSpinnerService: GlobalSpinnerService) {}

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        const spinnerParam: string = req.params.get("spinner")
        let handleObs: Observable<HttpEvent<any>> = next.handle(req)
        if(spinnerParam) {
            this._globalSpinnerService.spinner = true
            handleObs.toPromise().then(() => {
                this._globalSpinnerService.spinner = false
            })
        }

        return handleObs
    }
}

它按预期工作。但是，我现在看到我所有涉及微调器的请求都发送了两次。所以我想我删除微调器的方法不是最干净的。手柄结束后，如何告诉我的拦截器取下旋转器？

编辑：

我通过更换我改变了代码handleObs.toPromise().then通过handleObs.do()和它现在工作的罚款。我只是不确定为什么

我在 Angular 5 中使用了带有 HttpInterceptor 的拦截器，并且我在使用 rxjs 时遇到了问题，其中我的所有 http 请求都重复了。

import { Router } from '@angular/router';
import { Injectable, ApplicationRef } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/empty';
import { NgxSpinnerService } from 'ngx-spinner';
import { ErrorHandlingService } from '../../service/error-handling.service';

@Injectable()
export class ApiRequestInterceptor implements HttpInterceptor {

  private count: number = 0;

  constructor(
    private readonly spinner: NgxSpinnerService,
    private readonly router: Router,
    private readonly …