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中查看有关类型切换的更多信息

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

Answer 2

你仍然可以，但你需要从rxjs导入map() - 运算符，如下所示：

import 'rxjs/add/operator/map';

您将拥有map()运营商。

（另请参阅我的回答：https://stackoverflow.com/a/48323851/348841）

Answer 3

自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文档here了解更多详细信息。 *在这里，我假设您的 HttpClient 组件在 this.http 道具下可用。

angular：HttpClient地图响应

3 个答案: