angular:HttpClient地图响应

Question

目前我正在从http(@ angular/http)切换到HttpClient(@ angular/common/http),并且在将响应映射到对象时遇到了问题.

旧代码(之前正在工作)

this.http.get(environment.baseUrl + '/api/timeslots')
            .map((response: Response) => {
                    const data = response.json();
                    const timeslots = Array.of<Timeslot>();
                    for (const item of data) {...}

新代码,但编译错误:

this.httpClient.get(environment.baseUrl + '/api/timeslots')
                .map((response: Response) => {
                        const data = <Timeslot[]> response;
const timeslots = Array.of<Timeslot>();
                    for (const item of data) {...}

我是否想念演员？响应是一系列Timeslots.

Answer 1

返回新HttpClient的默认值是Object.它会在response.json()内部自动调用.

你可以告诉HttpClient响应的类型,所以:

this.httpClient.get<Timeslot[]>(...)
 .map((timeSlots) => {
   ...

timeSlots类型将在哪里Timeslot[]

在新的HttpClient中查看有关typecheking的更多信息

• https://angular.io/guide/http#typechecking-the-response

Answer 2

自Angular 6/7起，对Angular中RxJS库的实现进行了几处修改。

因此，RxJS运算符现在位于“ rxjs / operators”而不是“ rxjs / add / operator /：OperatorName”。同样，这些运算符不再可以直接链接到Observales，而是必须通过pipe（）方法链接。

因此，实现此目标的新方法必须如下所示：

import {map} from 'rxjs/operators';

this.http.get(...)
  .pipe(
    map( response => {
     // TODO: Do Your Staff Here! 
   } )
  );

请参阅此处的特定Angular文档以获取更多详细信息。*在这里，我假设您的HttpClient组件在this.httpprop 下可用。

Answer 3

你仍然可以,但你需要map()从rxjs 导入-operator,如下所示:

import 'rxjs/add/operator/map';

你将拥有map()运营商.

(另请参阅我的回答:https://stackoverflow.com/a/48323851/348841)