Ionic 3 TypeError：this.http.postは関数ではありません

Question

こんにちは私はionic 3に新しいです& ang 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私はHTTPモジュールをインポートしたが、私は方法のポストを使用することはできません2つのページで

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

} 

です。 エラーが表示されますか？

Answer 1

を作成するためにReflectiveInjectorを使用しています。 また、Httpを既に置き換えた新しいバージョンのHttpClientを使用する必要があります。

これらの変更を行いましょう。

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

:)人気の問題どうもありがとうございました、@JB Nizetは、あなたの代わりにHttpのHttpModuleを注入している言ったように、あなたの '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);