从 @Angular/http 迁移到 @Angular/common/http

Question

我正在将 angular-cli 应用程序从“@angular/http”迁移到“@angular/common/http”，但在使其正常工作时遇到一些问题。

我有一个函数可以向我的 API 发出请求并返回以下 json。

{"Categories":[
   {"name":"my first category","routetype":"category"},
   {"name":"my second category","routetype":"category"}
]}

我正在将其映射到类

export class Category {
    name: string;
    routetype: string;
}

当前代码（工作）：

import { Http, Response } from '@angular/http';
...
getCategories(context: SiteContext): Observable<Array<Category>> {
    return this.http.get(routes.getCategories(context), { cache: true })
      .map((res: Response) => <Array<Category>>res.json().Categories)
      .do(data => console.log(data))
      .catch(this.handleError);
  }

新代码（不起作用）。

import { HttpClient } from '@angular/common/http';
...
getCategories(context: SiteContext): Observable<Array<Category>> {
    return this.httpClient.cache().get(routes.getCategories(context))
      .map((res: Response) => <Array<Category>>res.json().Categories)
      .do(data => console.log(data))
      .catch(this.handleError);
  }

在 vs.code 中我收到以下错误消息：

[ts] Property 'Categories' does not exist on type 'Promise<any>' 

在这一行：

.map((res: Response) => <Array<Category>>res.json().Categories)

Answer 1

Angular 4.3+ HttpClient 有一个完全不同的 API。它已经为你完成了 json 解析。

所以你的代码应该看起来更像：

this.httpClient.get<Categories>().map(data => data.Categories).do(data => console.log(data).catch(this.handlError);

（您的Response类型属于旧API）