Ionic 3 TypeError：this.http.post 不是函数

Question

您好，我是 ionic 3 和 angular 4 的新手，我正在尝试创建一个登录页面，将电子邮件和密码发布到 api。但我收到此错误“this.http.post 不是函数”。 我一直在寻找，但我没有设法解决问题。 我已经阅读了这篇帖子With ionic 2，但我认为这不是同一个问题。

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

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

}

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

Answer 1

正如@JB Nizet 所说，您注入的是HttpModule 而不是Http。 此外，您应该使用HttpClient，这是已经取代Http 的新版本。

那么让我们来做这些改变吧。

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

}

Answer 2

:) 流行问题，使用 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);