Ionic 3 TypeError：this.http.post不是函数 [英] Ionic 3 TypeError: this.http.post is not a function

问题描述

我是离子3& angular 4和我试图建立一个登录页面，将电子邮件和密码发布到api。但我得到这个错误this.http.post不是一个函数。
我一直在寻找，但我没有设法解决问题。
我已阅读此帖离子2 但我认为这不是同一个问题。

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.

这是我的app.module.ts

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

这是我的login.ts

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

}

在我导入的两个页面上http模块，但我不能使用方法发布。
你看错了吗？非常感谢

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

推荐答案

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

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

}

这篇关于Ionic 3 TypeError：this.http.post不是函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！