Ionic 3 TypeError: this.http.post is not a function

问题

Hi I'm new to ionic 3 & angular 4 and I'M trying to make a login page that post email and password to the api. But i get this error "this.http.post is not a function". I've been looking but I have not managed to solve the problem. I have read this post With ionic 2 but I think it is not the same problem.

This is my app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { HttpModule, Headers, RequestOptions } from '@angular/http';
import 'rxjs/Rx';
import { MyApp } from './app.component';


import { LoginPage } from '../pages/login/login';
import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    ListPage,
    LoginPage
  ],
  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp)

  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    ListPage,
    LoginPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

And this is my login.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { FormBuilder, FormGroup, Validators} from '@angular/forms';
import { HttpModule, Headers, RequestOptions } from '@angular/http';

import { HomePage } from '../home/home';

@IonicPage()
@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage {
    isLogged: boolean;
    constructor(public navCtrl: NavController,public fb: FormBuilder, public http: HttpModule) {
    this.myForm = this.fb.group({
        email: ['', [Validators.required]],
        password: ['', [Validators.required]]
    });
    this.http = http;

  }

  loginUser(){
    var datajson= {accion: 'login', email: this.myForm.value.email, password: this.myForm.value.password};
    alert(JSON.stringify(datajson));
    var apiurl = 'http://batbike.es/ajax/bbdd.php';

    this.http.post(apiurl,datajson).then(data => {alert(data.data)}).catch(error=>{ alert (error.status)});

    //Esta linea me lleva a la página home
    //this.navCtrl.setRoot(HomePage).then(data => console.log(data)),error => console.log(error);
  }

}

On the two pages I have imported http module but I can not use the method post. Do you see the error? Thank you very much

回答1:

As @JB Nizet said, you are injecting HttpModule instead of Http. Also you should be using HttpClient that's the new version that already replaced Http.

So let's do those changes.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
// import { HttpModule, Headers, RequestOptions } from '@angular/http';
import { HttpClientModule } from '@angular/common/http';
import 'rxjs/Rx';
import { MyApp } from './app.component';


import { LoginPage } from '../pages/login/login';
import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    ListPage,
    LoginPage
  ],
  imports: [
    BrowserModule,
    // HttpModule,
    HttpClientModule,
    IonicModule.forRoot(MyApp)

  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    ListPage,
    LoginPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

login.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { FormBuilder, FormGroup, Validators} from '@angular/forms';
// import { HttpModule, Headers, RequestOptions } from '@angular/http';
import { HttpClient, HttpHeaders } from '@angular/common/http';

import { HomePage } from '../home/home';

@IonicPage()
@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage {
    isLogged: boolean;
    constructor(public navCtrl: NavController,public fb: FormBuilder, public http: HttpClient) {
    this.myForm = this.fb.group({
        email: ['', [Validators.required]],
        password: ['', [Validators.required]]
    });
    // this.http = http; 
    // you don't need last line because you already did that with 'public http: HttpClient'

  }

  loginUser(){
    var datajson= {accion: 'login', email: this.myForm.value.email, password: this.myForm.value.password};
    alert(JSON.stringify(datajson));
    var apiurl = 'http://batbike.es/ajax/bbdd.php';

    this.http.post(apiurl,datajson).subscribe(data => {alert(data.data)}).catch(error=>{ alert (error.status)});

    //Esta linea me lleva a la página home
    //this.navCtrl.setRoot(HomePage).then(data => console.log(data)),error => console.log(error);
  }

}

回答2:

:) popular problem, use ReflectiveInjector to create your 'http' object

let injector = ReflectiveInjector.resolveAndCreate([
        Http, BrowserXhr,
        {provide: RequestOptions, useClass: BaseRequestOptions},
        {provide: ResponseOptions, useClass: BaseResponseOptions},
        {provide: ConnectionBackend, useClass: XHRBackend},
        {provide: XSRFStrategy, useFactory: () => new CookieXSRFStrategy()},]);
    this.http = injector.get(Http);

来源：https://stackoverflow.com/questions/47064698/ionic-3-typeerror-this-http-post-is-not-a-function