Question

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

我收到此错误：

我的服务代码：

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();
}

有类似的错误here和here。答案总是包含rxjs函数，但我这样做，所以我不太确定，为什么我会收到此错误。

修改

所以实际问题不是这个函数，而是在主app.js文件中的路由之前缺少“/”。解决之后，问题就消失了。

Answer 1

好吧，就像它说的那样。从observable返回的错误不包含json方法。这意味着它不属于Response类型，但它只包含错误。您应该尝试在控制台中打印出对象并查看其中的内容：

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

您可能会发现它只是一个xmlhttpresponse对象

Answer 2

不要抓住并重新抛出。只需在使用服务时处理异常。

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

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

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

您可以看到Observable.throw的documentation及其使用方式。

您收到的错误对象格式错误。您可以添加一些控制台日志以查看您要返回的内容。但它引起了问题。

Answer 3

不要在响应类型的响应上调用json（）。如果你期望数据回来，例如。客户刚刚添加，只需：

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

Answer 4

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

import { HttpModule} from "@angular/http";

@NgModule（{

声明：[

----]，
     进口：[         BrowserModule，         HttpModule]，
providers: [
    DataService
],   
bootstrap: [
   AppComponent
]})

这将解决您的问题，现在更新版本的角度方法被重写。

Answer 5

如果它可以帮助某人，则在尝试解析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) {

  }
}

TypeError：error.json不是函数

5 个答案: