Uncaught Typeerror: result.subscribe ist keine Funktion

Question

ich die folgende Fehlermeldung erhalten: Uncaught TypeError: result.subscribe is not a function

Hier ist auch ein Screenshot des Fehlers:

Aber ich habe versucht zu fangen der Fehler. Darunter kannst du meinen Code sehen.

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

Wie Sie ich den Fehler in der login() Methode in user.service.ts zu fangen versucht haben, zu sehen. Wer weiß vielleicht, wie ich das lösen kann? ?

Answer 1

Ihre handleError() Funktion benötigt eine Observable

zurückzukehren Wenn Sie die HTTP Client Angular 2 docs sehen es ein Beispiel ist, sondern auch für Ihren speziellen Fall

ersetzen

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

mit

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