javascript - Cannot read property 'post' of undefined - Angular 2 - Stack Overflow

admin管理员组

文章数量:1410705

Below is the code snippet from my ponent file

import { Component,Injectable,Inject,OnInit, OnDestroy, EventEmitter,Output } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';
import 'rxjs/add/operator/switchMap';
...
@Injectable()
export class MyComponent {
    constructor (private http: Http) { }
    saveDetails()
    {
        var response:any;
        var body       = customer_details;
        var headers    = new Headers({ 'Content-Type': 'application/json' });
        var options    = new RequestOptions({ headers: headers });
        this.http.post("/user/add-customer-details", body, options)
            .map((res:Response) => res.json()).subscribe(
                data => { response = data},
                err => console.error(err),
                () => {
                    console.log(response);
                }
        );
    }
}

There is no pilation error or any other error but when I am calling the post method it's saying Cannot read property 'post' of undefined so I tried console.log(this.http); right before the post method call, then its showing undefined in the browser console, I tried all the possible solutions but unable to understand why it's not working, please help...

thanks in advance!!!

Below is the code snippet from my ponent file

import { Component,Injectable,Inject,OnInit, OnDestroy, EventEmitter,Output } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';
import 'rxjs/add/operator/switchMap';
...
@Injectable()
export class MyComponent {
    constructor (private http: Http) { }
    saveDetails()
    {
        var response:any;
        var body       = customer_details;
        var headers    = new Headers({ 'Content-Type': 'application/json' });
        var options    = new RequestOptions({ headers: headers });
        this.http.post("/user/add-customer-details", body, options)
            .map((res:Response) => res.json()).subscribe(
                data => { response = data},
                err => console.error(err),
                () => {
                    console.log(response);
                }
        );
    }
}

There is no pilation error or any other error but when I am calling the post method it's saying Cannot read property 'post' of undefined so I tried console.log(this.http); right before the post method call, then its showing undefined in the browser console, I tried all the possible solutions but unable to understand why it's not working, please help...

thanks in advance!!!

• javascript
• angular
• typescript
• angular-http

Share Improve this question Follow edited Jun 4, 2017 at 10:59 CodeWarrior 2,86133 gold badges1919 silver badges1818 bronze badges asked Jun 4, 2017 at 10:57 Akshay KhaleAkshay Khale 8,38188 gold badges5151 silver badges6060 bronze badges 3

• 1 How do you call saveDetails? Why are you using @Injectable for ponent? – yurzui Commented Jun 4, 2017 at 11:18
• I have following button on my view <button type="button" (click)="saveDetails()" class="btn btn-default">Save Details</button> and I am just clicking the button... @yurzui – Akshay Khale Commented Jun 4, 2017 at 11:22
• I have found the solution and posted it as answer @echonax , I am unable to accept it now... – Akshay Khale Commented Jun 5, 2017 at 6:56

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

After spending a few hours in scratching my head and reading all the possible articles, answers, documentation and possibly everything available on the Internet, finally I found the solution.

I have just changed my constructor from

constructor (private http: Http) { }

To

constructor (@Inject(Http) private http:Http) { }

Though @Inject is an Experimental decorator, It's working

Thank you everyone for helping me...

You have to add HTTP_PROVIDERS to either the ponent providers array like this:

providers: [HTTP_PROVIDERS]

EDIT

HTTP_PROVIDERS is deprecated. Import the http module instead.

@NgModule({
    imports: [
        BrowserModule,
        HttpModule  
        ],
    declarations: [AppComponent],
    providers: [],
    bootstrap: [AppComponent],
})

You need to add the HttpModule to your NgModule for the dependency injection.

You can look it up here https://angular.io/docs/ts/latest/guide/server-munication.html#!#http-providers

The HttpModule is necessary for making HTTP calls. [...]

本文标签： javascriptCannot read property 39post39 of undefinedAngular 2Stack Overflow