Angular 4中，this.http.get（...）.map不是一个函数。

Question

你好，我遇到了代码问题。

import { Injectable } from '@angular/core';
import { Car } from "./models/car";
import { Observable } from "rxjs/Observable";
import { Http } from "@angular/http";
import 'rxjs'

@Injectable()
export class CarsService {
   private apiUrl = "http://localhost:3000/api/cars";
   constructor(private http : Http) { }

    getCars() : Observable<Car[]> {
        return this.http.get(this.apiUrl)
           .map((res) => res.json())
    }
}

使用这段代码时我遇到了错误：

this.http.get(...).map不是一个函数

但是当我添加以下内容时：

import 'rxjs/add/operator/map'

仍然存在问题，但错误信息是：

无法读取未定义属性“map”

能否帮助我解决这个问题？谢谢。

- Marek Patyna

---

什么是Angular版本？ - Sajeetharan

Angular CLI: 1.5.0 Node: 6.11.4 操作系统: win32 x64 Angular: 5.0.1哦，原来是5.0.1，我以为我在使用版本4。 - Marek Patyna

Angular 5不再包括Http，它已被HttpClient取代。 - Roddy of the Frozen Peas

angular-http-get-with-typescript-error-http-get-map-is-not-a-function-in-n - HDJEMAI

Answer 1

正如其他人所提到的，Http已经过时，请使用HttpClient代替。 HttpClient将您的响应解析为一个对象，因此您可以删除响应的映射。另外，为了避免类型检查错误，请告诉Angular您期望什么类型的响应。

因此，请导入HttpClientModule并将其添加到imports数组中，在BrowserModule之后。在您的服务中导入HttpClient，在构造函数中注入它，并按以下方式使用：

import { Injectable } from '@angular/core';
import { Car } from "./models/car";
import { Observable } from "rxjs/Observable";
import { HttpClient } from "@angular/common/http";
import 'rxjs'

@Injectable()
export class CarsService {
   private apiUrl = "http://localhost:3000/api/cars";
   constructor(private httpClient : HttpClient) { }

    getCars() : Observable<Car[]> {
      // tell Angular you are expecting an array of 'Car'
      return this.httpClient.get<Car[]>(this.apiUrl)
    }
}

- AT82

---

好的，我导入了我的HttpClientModule并更新了我的代码。我运行我的服务器，地址是http://localhost:3000/api/cars，它可以工作。一切都很好，我看到了我的Car[]。但在浏览器中仍然出现：无法读取未定义的“map”属性。也许我可以忽略这个问题，或者不行？如果一切正常的话？ - Marek Patyna

你现在没有映射到任何地方了吗？你尝试重新启动项目了吗？或者你在其他地方使用了 map 吗？ - AT82

等个5分钟，我会添加我的另一个代码并告诉你一些事情。 - Marek Patyna

我添加了答案，你能检查一下吗？ - Marek Patyna

现在一切都好了。感谢 @AJT_82 的帮助。 - Marek Patyna

Answer 2

在 Angular5 中，HttpClient 的实现已经内置了对 map 的使用，因此它会自动为您工作。

只需将其更新为：

 getCars() : Observable<Car[]> {
     return this.http.get(this.apiUrl)
 }

同时，请确保使用 HttpClient 而不是 Http。

您可以在此处了解更多信息。

- Sajeetharan

---

那我需要做什么？ - Marek Patyna

@MarekPatyna，请查看附加的链接。 - Sajeetharan

答案有帮助吗？ - Sajeetharan

好的，现在我更新了我的HTTP并删除了这个：.map((res) => res.json())。 - Marek Patyna

在我的Cmder中出现了这个错误：error TS2322：类型“Observable<Object>”无法分配给类型“Observable<Car[]>”。 - Marek Patyna

Answer 3

编辑你的代码

import { Injectable } from '@angular/core';
import { Car } from "./models/car";
import { Observable } from "rxjs/Observable";
import { Http } from "@angular/http";


@Injectable()
export class CarsService {
   private apiUrl = "http://localhost:3000/api/cars";
   constructor(private http : Http) { }

   getCars() : Observable<Car[]> {
     return this.http.get(this.apiUrl)
   }
}

由于它自动将响应解析为JSON格式，您无需显式解析。

- VithuBati

Answer 4

ngOnInit() {
 this.loadCars();

}

loadCars() : void {
 this.carsService.getCars().subscribe((cars) => {
  this.cars = cars;
  this.countTotalCost();
 })
}

所以我将这个 this.countTotalCost();

从 ngOnInit 移动到 loadCars

现在 .map 是好的。

我只有这个错误：表达式在检查后已更改。之前的值：'undefined'。当前值：'NaN'。

<div class="row" *ngIf="grossCost"> //this line error/error context
 <div class="col-sm-12">
  <div class="total-cost">
   <p class="text-right">TOTAL GROSS COST: {{ grossCost}} PLN</p>
  </div>
 </div>
</div>

- Marek Patyna