“HttpEvent<Customer>”类型上不存在属性“data”

Question

我有这样的设置

• api.service（包装 httpClient 模块）
• 客户服务

API 服务看起来像这样：

get<T>(url: string, options?) {
return this.httpClient.get<T>(this.apiUrl + url, this.getOptions(options));}

在我的客户服务中我有：

    private fetchCustomer(access_token: String): Observable<Customer> {
      const options = { headers: new HttpHeaders({ Authorization: 'Bearer ' + access_token }) };
      return this.http
        .get<Customer>('customers/me', options)
        .map(res => {
          const customer = res.data;
          customer.access_token = access_token;
          return customer;
        })
        .catch(this.handleError.bind(this));
    }

它给了我这个错误：

[ts]
Property 'data' does not exist on type 'HttpEvent<Customer>'.
Property 'data' does not exist on type 'HttpSentEvent'.

Answer 1

解决方案是使用新的方式获取json数据....

const customer = res['data'];

Answer 2

查看 Angular 源代码（v4.3.3），当您包装 http.get 而不指定

options

的类型时，打字稿编译器正在使用此类型定义

/**
 * Construct a GET request which interprets the body as JSON and returns the full event stream.
 *
 * @return an `Observable` of all `HttpEvent`s for the request, with a body type of `T`.
 */
get<T>(url: string, options: {
    headers?: HttpHeaders;
    observe: 'events';
    params?: HttpParams;
    reportProgress?: boolean;
    responseType?: 'json';
    withCredentials?: boolean;
}): Observable<HttpEvent<T>>;

要让 TypeScript 编译器使用正确的类型定义，您可以指定选项的类型为 Object。在您的情况下， getOptions 方法应指定它返回 Object 类型。

get<T>(url: string, options?) {
    return this.httpClient.get<T>(
        this.apiUrl + url, 
        this.getOptions(options) // this.getOptions needs to specify it is returning the type Object
    );
}

getOptions(options): Object {...}

现在打字稿编译器将找到正确的类型定义

/**
 * Construct a GET request which interprets the body as JSON and returns it.
 *
 * @return an `Observable` of the body as type `T`.
 */
get<T>(url: string, options?: {
    headers?: HttpHeaders;
    observe?: 'body';
    params?: HttpParams;
    reportProgress?: boolean;
    responseType?: 'json';
    withCredentials?: boolean;
}): Observable<T>;

现在您终于可以访问数据了

const customer = res.data;

Answer 3

Angular 4.3 中的新 HttpClient 目前有 3 个原型

get<T>

他们是

get<T>(url: string, options: {
    headers?: HttpHeaders;
    observe: 'events';
    params?: HttpParams;
    reportProgress?: boolean;
    responseType?: 'json';
    withCredentials?: boolean;
}): Observable<HttpEvent<T>>;

get<T>(url: string, options: {
    headers?: HttpHeaders;
    observe: 'response';
    params?: HttpParams;
    reportProgress?: boolean;
    responseType?: 'json';
    withCredentials?: boolean;
}): Observable<HttpResponse<T>>;

get<T>(url: string, options?: {
    headers?: HttpHeaders;
    observe?: 'body';
    params?: HttpParams;
    reportProgress?: boolean;
    responseType?: 'json';
    withCredentials?: boolean;
}): Observable<T>;

client.d.ts 顶部的注释说明了这一点。

 * Each request method has multiple signatures, and the return type varies according to which
 * signature is called (mainly the values of `observe` and `responseType`).

真正重要的部分是观察参数

get<T>(url, {observe: 'events'})

返回

HttpEvent<T>

get<T>(url, {observe: 'response'})

返回

HttpResponse<T>

get<T>(url, {observe: 'body'})

返回

T

，如果缺少

observe

字段，则为默认值

---

注意：如果将选项部分子类化为方法，则必须返回对象类型，否则编译器将自动选择恰好返回的第一个方法

HttpEvent<T>

所以

getOptions(): any {
    return { observe: 'body' }
};

和

getOptions(): any {
    return { observe: 'response' }
};

将编译到错误接口并返回

HttpEvent<T>

，但是

getOptions(): object {
    return { observe: 'body'}
};

和

getOptions(): object {
    return { observe: 'response'}
};

将分别返回

T

和

HttpResponse<T>