未捕获的TypeError: result.subscribe不是函数

Question

我收到以下错误：Uncaught TypeError: result.subscribe is not a function

以下也是错误的屏幕截图：

​

​

但我确实尝试过捕捉错误。下面你可以看到我的代码。

login.component.ts：

import { Component } from '@angular/core';
import { UserService } from '../../services/user.service';
import { User } from '../../models/user';
import {ToasterContainerComponent, ToasterService, ToasterConfig} from 'angular2-toaster/angular2-toaster';

@Component({
    moduleId: module.id,
    selector: 'login',
    directives: [ToasterContainerComponent],
    templateUrl: 'login.component.html',
    providers: [UserService, ToasterService]
})

export class LoginComponent {
    user: User = new User();
    loginRes: String;
    private toasterService: ToasterService;

    public toasterconfig: ToasterConfig = new ToasterConfig({
        showCloseButton: true,
        tapToDismiss: false,
        timeout: 0
    });

    constructor(private _userService: UserService, toasterService: ToasterService) {
        this.toasterService = toasterService;
    }

    data = {};
    onSubmit() {
        this._userService.login(this.user)
            .subscribe(
                res => {
                    console.log("res onSubmit");
                    console.log(res);
                },
                function(error) { console.log("Error happened" + error)}
            );
    }
}

user.service.ts：

import { Injectable } from '@angular/core';
import { Headers, RequestOptions, Http, Response } from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import { User } from '../models/user';

@Injectable()
export class UserService {
    private loginUrl: string;

    constructor(private _http: Http) {

    }

    login(user: User) {
        this.loginUrl = "http://localhost:3000/api/auth/login";
        let data = { "username": user.username, "password": user.password };
        let body = JSON.stringify(data);
        let headers = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: headers });

        return this._http.post(this.loginUrl, body, options)
            .map(this.extractData)
            .catch(this.handleError);
    }

    private extractData(res: Response) {
        let body = res.json();
        return body || {};
    } 

    private handleError(error: any) {
        console.log('Yup an error occurred', error);
        return error.message || error;
    }
}

正如您所看到的，我已经尝试在user.service.ts的login()方法中捕获错误。有人知道我怎么解决这个问题吗？

Answer 1

您的handleError()函数需要返回一个Observable

如果您查看HTTP Client Angular 2 docs，就会看到一个示例，但针对您的特定情况

替换

private handleError(error: any) {
    console.log('Yup an error occurred', error);
    return error.message || error;
}

使用

private handleError(error: any) {
    console.log('Yup an error occurred', error);
    return Observable.throw(error.message || error);
}