从@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"}
]}

我正在将其映射到 class

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+ 。它已经为您进行了 json 解析。

因此您的代码应该更像：

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

（您的回复类型属于旧的API）

Answer 2

在进行等效迁移时，对我有很大帮助的是生成一个小型 jhipster 测试项目并分析如何使用新的 HttpClient 生成 jhipster 实体。不是一个确切的答案，但可能会有所帮助。

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

Migrating from @angular/http to @angular/common/http

angular-cli

angular-httpclient