Передача объекта в качестве аргумента в Angular HttpHeaders

Question

Я пытаюсь динамически создать объект заголовка и передать его HttpHeaders в качестве аргумента. Это работает при использовании ng serve , даже если это отображается как ошибка. Однако не позволяет ng build . Большинство решений включают использование JSON .stringify, но это не работает, я прокомментировал и оставил это в коде на данный момент.

getData(url: string, header: object, params: object){
    console.log("header: "+ header)
    //let httpHeaders = new HttpHeaders(JSON.stringify(header));
    let httpHeaders = new HttpHeaders(header);
    console.log(this.http.get(url));
    return this.http.get(url, {headers: httpHeaders}); 
  }

Когда я пытаюсь JSON .stringify (заголовок) Я получаю сообщение об ошибке ниже

Не удалось выполнить 'setRequestHeader' для 'XMLHttpRequest': '{"x-rapidapi-host"' не является допустимым именем поля заголовка HTTP.

Я не могу понять, почему это не работает, поскольку, если я пытаюсь жестко закодировать тот же заголовок в httpHeaders , он работает нормально, например,

let httpHeaders = new HttpHeaders({"x-rapidapi-host": "some value", 
                                   "x-rapidapi-key": "some-value"});

Answer 1

Спасибо @piedpiper @Sandeep и @ niti sh. Я использую комбинацию всех ваших предложений.

    let httpHeaders: HttpHeaders = new HttpHeaders({'Content-Type':'application/json'});
    // let httpHeaders = new HttpHeaders(header);
    httpHeaders = httpHeaders.append("x-rapidapi-host", "some value");
    httpHeaders = httpHeaders.append("x-rapidapi-key": "some-value");

    this.appService.getData(this.apiUrl, httpHeaders, this.params ).subscribe(
      (data: any) => this.allData = data

И изменил код getData на

  getData(url: string, httpHeaders: HttpHeaders, params: object){
    console.log("header: "+ httpHeaders)

    console.log(this.http.get(url));
    return this.http.get(url, {headers: httpHeaders}); 
  }

Answer 2

 let httpHeaders = new HttpHeaders(
     {'Content-Type','application/json'},
     {'token', value});
     let httpOptions = { headers: httpHeaders};

Answer 3

Вы должны определить константу вне класса, а не внутри

const httpOptions = {headers: new HttpHeaders({'Content-Type':  'application/json','Accept': 'application/json'})};

И использовать следующим образом

return this.http.get(tgtUrl, httpOptions).pipe(map((res: Response) => { //handle the response }

Answer 4

Может быть, вы можете попытаться добавить заголовки непосредственно к вашему запросу, как это, потому что httpheaders неизменны -

let headers: HttpHeaders = new HttpHeaders();
headers = headers.append('x-rapidapi-host', 'some value');
headers = headers.append('x-rapidapi-key', 'some value');