Angular Ionic 3 TypeError:this.http.post不是函数

嗨，我是爱奥尼亚3&4的新手，我正在尝试创建一个登录页面，向api发布电子邮件和密码。但是我得到这个错误“this.http.post不是一个函数”。 我一直在找，但没能解决这个问题。 我读过这篇文章，但我认为这不是同一个问题

这是我的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 {}

这是我的登录名

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

}

在这两个页面上，我已经导入了http模块，但是我不能使用post方法。 你看到错误了吗？非常感谢

：）常见问题，请使用ReflectiveInjector创建“http”对象

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

---

正如@JB Nizet所说，您正在注入

HttpModule

，而不是

Http

。 您还应该使用

HttpClient

，这是已经取代

Http

的新版本

让我们做些改变

应用程序模块.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 {}

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

}

login.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 {}

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

}

---

您可以在组件中注入HttpModule，而不是注入Http。注意：在Angular 5中，Http被弃用，取而代之的是HttpClient。