Angular httpinteceptor，具有来自可观测数据的标题值

我正在尝试将头附加到HTTP调用。标题值将来自一个可观察值。虽然没有发出任何错误，但不会将标题添加到我的请求中

我完全不明白为什么它没有等待可观察的结果

import { Injectable } from "@angular/core";
import {
  HttpEvent,
  HttpInterceptor,
  HttpHandler,
  HttpRequest,
  HttpHeaders
} from "@angular/common/http";
import { Observable } from "rxjs";
import { ConfigService } from "../services/config.service";
import { map } from "rxjs/operators";

@Injectable()
export class InterceptAPICalls implements HttpInterceptor {
  constructor(private configService: ConfigService) {}

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


    let headers = {
      "Accept": "application/json"
    };

   return new Observable(observer=>{
    this.configService.currentConfig()
        .pipe(map(e => {

                headers['key'] = e["key"];
                headers['X-Allowed-Elapsing'] = e["allowed-elapse"] ;

              const clonedRequest = req.clone({
                headers: new HttpHeaders(headers)
              });
              return next.handle(clonedRequest);
        }));
   })

  }
}

从“@angular/core”导入{Injectable}；
进口{
HttpEvent，
HttpInterceptor，
HttpHandler，
HttpRequest，
HttpHeader
}来自“@angular/common/http”；
从“rxjs”导入{observeable}；
从“./services/config.service”导入{ConfigService}；
从“rxjs/operators”导入{map}；
@可注射（）
导出类拦截器实现HttpInterceptor{
构造函数（私有configService:configService）{}
拦截(
请求：HttpRequest，
下一步：HttpHandler
)：可见{
让标题={
“接受”：“应用程序/json”
};
返回新的可观察对象（观察者=>{
this.configService.currentConfig（）
.管道（地图（e=>{
标题['key']=e[“key”]；
标题['X-Allowed-Elapsing']=e[“Allowed-elapse”]；
const clonedRequest=req.clone({
标题：新的HttpHeaders（标题）
});
返回next.handle（clonedRequest）；
}));
})
}
}

简而言之，currentConfig如下所示

    currentConfig() : Observable<any>{

     return new Observable(observer=>{
        observer.next({'key':'key','allowed-elapse': 9909});
        observer.complete();
     });

       }

currentConfig（）：可观察{
返回新的可观察对象（观察者=>{
next（{'key'：'key'，'allowed-elapse'：9909}）；
observer.complete（）；
});
}

刚刚尝试过这个，它在我的应用程序中运行良好

export class InterceptAPICalls implements HttpInterceptor {

  constructor(private configService: ConfigService) { }

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

    let headers = req.headers;
    headers = headers.set('Accept', 'application/json');

    return this.configService.currentConfig()
      .pipe(
        first(),
        switchMap(config => {
          headers = headers.set('key', config['key']);
          headers = headers.set('X-Allowed-Elapsing', config['allowed-elapse']);
          return next.handle(req.clone({ headers }));
        })
      );
  }
}

export类InterceptAPICalls实现HttpInterceptor{
构造函数（私有configService:configService）{}
截取（req:HttpRequest，next:HttpHandler）：可观察{
让headers=req.headers；
headers=headers.set（'Accept'，'application/json'）；
返回此.configService.currentConfig（）
.烟斗(
第一个（），
开关映射（配置=>{
headers=headers.set（'key'，config['key']）；
headers=headers.set（'X-Allowed-Elapsing'，config['Allowed-elapse']）；
返回next.handle（req.clone（{headers}））；
})
);
}
}

刚刚尝试过这个，它在我的应用程序中运行良好

export class InterceptAPICalls implements HttpInterceptor {

  constructor(private configService: ConfigService) { }

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

    let headers = req.headers;
    headers = headers.set('Accept', 'application/json');

    return this.configService.currentConfig()
      .pipe(
        first(),
        switchMap(config => {
          headers = headers.set('key', config['key']);
          headers = headers.set('X-Allowed-Elapsing', config['allowed-elapse']);
          return next.handle(req.clone({ headers }));
        })
      );
  }
}

export类InterceptAPICalls实现HttpInterceptor{
构造函数（私有configService:configService）{}
截取（req:HttpRequest，next:HttpHandler）：可观察{
让headers=req.headers；
headers=headers.set（'Accept'，'application/json'）；
返回此.configService.currentConfig（）
.烟斗(
第一个（），
开关映射（配置=>{
headers=headers.set（'key'，config['key']）；
headers=headers.set（'X-Allowed-Elapsing'，config['Allowed-elapse']）；
返回next.handle（req.clone（{headers}））；
})
);
}
}

currentConfig看起来像什么？你也只是在使用一个管道和地图，而不是订阅它。简单地说，它会在@Mickers吐出一些字典数据。请参阅我更新的代码中的示例。currentConfig看起来像什么？你也只是在使用一个管道和地图，而不是订阅它。简单地说，它会在@Mickers吐出一些字典数据。请参阅我更新的代码中的示例。