Angular HttpClient.get 標頭

Question

我有這個簡單的代碼即服務

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class SpotifyService {
  constructor(private http: HttpClient) {
  }

  getQuery(query: string) {
    const cabecera: HttpHeaders = new HttpHeaders({
      'Authorization': 'Bearer BQDWZC2Y_iSV3rfmAhv-QxDpmhhJbbmgCnspy7HpIZPX5CbJ74D4Xl4aOyXLUL4smF2gZ_V3wiSXLxdLFPY'
    });
    const url = 'https://api.spotify.com/v1/' + query;
    return this.http.get(url, { cabecera });
  }
  getNewReleases() {
    return this.getQuery('browse/new-releases').pipe(map( data => data['albums'].items));
  }
}

但我收到此錯誤，我不明白為什么。

'{ cabecera: HttpHeaders; 類型的參數 }' 不能分配給類型為 '{ headers?: HttpHeaders | 的參數 { [標題：字符串]：字符串 | 細繩[]; }; 觀察？：“身體”； 參數？：Ht...'。 對象字面量只能指定已知屬性，並且類型 '{ headers?: HttpHeaders | 中不存在 'cabecera'。 { [標題：字符串]：字符串 | 細繩[]; }; 觀察？：“身體”； 參數？：Ht...'。

Answer 1

你return this.http.get(url, { cabecera }); 行在語義上不正確，這意味着/解決以下問題：

return this.http.get(url, 
    { cabecera : new HttpHeaders({
        'Authorization': 'Bearer BQDWZC2Y_iSV3rfmAhv-QxDpmhhJbbmgCnspy7HpIZPX5CbJ74D4Xl4aOyXLUL4smF2gZ_V3wiSXLxdLFPY'
    }) 
});

這是錯誤的，因為傳遞給 HTTP 客戶端的選項對象不期望名為cabecera的鍵，而是一個headers鍵。

所以這可以通過簡單地用這個替換該行來解決： return this.http.get(url, { headers: cabecera });