Angular TypeError:error.json不是函数

编辑：阅读问题末尾的部分

我得到这个错误：

我的服务代码：

import { Http, Response, Headers } from "@angular/http";
import { Injectable } from "@angular/core";
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import { Observable } from "rxjs";

import { Client } from "./client.model";

@Injectable()
export class ClientService {
    private clients: Client[] = [];

    constructor(private http: Http){}

    addClient(client: Client) {
        this.clients.push(client);
        const body = JSON.stringify(client);
        const headers = new Headers({'Content-Type': 'application/json'});
        return this.http.post('http://localhost:3000/client', body, {headers: headers})
            .map((response: Response) => response.json())
            .catch((error: Response) => Observable.throw(error.json()));
    }

    getClients() {
        return this.clients;
    }

    deleteClient(client: Client) {

    }
}

在我的组件中，我有一个提交功能：

onSubmit(form: NgForm) {
    let email = form.value.email;
    let password = form.value.password;
    let firstName = form.value.firstName;
    let lastName = form.value.lastName;

    const client = new Client(email, password, firstName, lastName);
    this.clientService.addClient(client)
        .subscribe(
            data => console.log(data),
            error => console.error(error)
        );
    form.resetForm();
}

也有类似的错误和错误。答案总是包括rxjs函数，但我这样做了，所以我不太确定为什么会出现这个错误

编辑：

---

因此，实际的问题不是这个函数，而是主app.js文件中我的路线前缺少“/”。解决了这个问题后，问题就消失了。

不要抓住机会，然后再重复。只需在使用服务时处理异常

 .map(response => response.json());

或者，如果您想处理服务中的异常，只需返回一个错误，您可以执行以下操作

 .map(response => response.json())
            .catch(error => Observable.throw("Error in x service"));

您可以看到Observable.throw的名称及其使用方式

---

您获取的错误对象的格式不正确。您可以添加一些控制台日志，以查看返回的内容。但它也引起了一些问题。

就像它所说的那样。从observable返回的错误不包含

json

方法。这意味着它不是

响应类型

，而是包含错误。您应该在控制台中打印出对象，然后查看其中的内容：

.catch((error: any) => console.log(error))

您可能会发现它只是一个

xmlhttpresponse

对象对response类型的响应不调用json（）。 如果您希望返回数据，例如刚刚添加的客户端，只需执行以下操作：

.map((data: any) => {
    return data._embedded.client as Client;
});

---

只需对app.module.ts文件进行更改

从“@angular/http”导入{HttpModule}

@NGD模块({

声明：[

----]，

进口：[
浏览器模块，
HttpModule
]

providers: [
    DataService
],   
bootstrap: [
   AppComponent
]})

这将在更新版本的angular中修复您的问题，方法将被重写。
如果它可以帮助某人，我在尝试解析API错误响应并通知用户时也会遇到相同的错误

使用新的HttpClient类时，不需要response.json（）或error.json（）。使用时，您将出现此类错误：

类型“HttpErrorResponse”上不存在属性“json”

例如，上面的服务代码应该如下所示：

import { HttpClient, HttpResponseBase, HttpErrorResponse } from '@angular/common/http';
import { Injectable } from "@angular/core";
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import { Observable } from "rxjs";

import { Client } from "./client.model";

@Injectable()
export class ClientService {
  private clients: Client[] = [];

  constructor(private http: Http){}

  addClient(client: Client) {
    this.clients.push(client);
    const body = JSON.stringify(client);
    const headers = new Headers({'Content-Type': 'application/json'});
    return this.http.post('http://localhost:3000/client', body, {headers: headers})
        .map((response: HttpResponseBase) => response)
        .catch((error: HttpErrorResponse ) => Observable.throw(error));
  }

  getClients() {
    return this.clients;
  }

  deleteClient(client: Client) {

  }
}

可能重复的@Igor你读了我的洞问题，不是吗？我指出，有类似的问题，似乎对我不起作用。我读了你的整个问题。原因是它不包含json，就像在副本中一样。还有其他类似的问题，都是同一个罪魁祸首。在你的浏览器中调试并签出错误中的响应状态，您可能会发现确实没有可用的json。您也可以通过在浏览器调试器的“网络IO”选项卡中检查结果来完成此操作。但是，如果您想证明这些可能的重复项没有关系，您应该已经这样做了，并将该数据复制到您的问题中。如现在，就我们而言，这（副本）很可能是罪魁祸首（任何不坐在电脑前的人）可以看到。@Zoker尝试我刚才添加的解决方案。现在试试，我刚刚意识到你不应该在那里捕获任何东西，你会在调用服务的方法上捕获。你确定吗？在文档中，他们确实映射并捕获：@Zoker我通常不会这样做。但也许这是最佳实践。我认为我提供的解决方案现在应该可以工作了。@Eudardo:现在我明白了他的错误是：