Question

当我尝试发出HTTP请求时出现错误消息： “无法读取未定义的属性'get'”

import {Component} from '@angular/core';
import {IonicPage, NavController, NavParams} from 'ionic-angular';
import {Observable} from 'rxjs/Observable';
import {HttpClient} from "@angular/common/http";
import {ContactGdzPage} from "../contact-gdz/contact-gdz";
import {ListeServicePage} from "../liste-service/liste-service";
import {ApiGdz} from "../../services/apiGdz.service";

@IonicPage()
@Component({
    selector: 'page-dashboard',
    templateUrl: 'dashboard.html',
})
export class DashboardPage {

    constructor(private apiGdz: ApiGdz,  public http: HttpClient) {

        this.apiGdz.callApi().then(
            (data) => {

                console.log('ok', data);
            },
            (error) => {
                console.log('!ok', error);
            }
        );
    }
}



import {HttpClient} from "@angular/common/http";


export class ApiGdz {

    public http: HttpClient;

    constructor() {}

    callApi() {
        return new Promise(
            (resolve, reject) => {
                this.http.get('https://swapi.co/api/films').subscribe(
                    (data) => {
                        resolve(data);
                    },
                    (error) => {
                        reject(error);
                    }
                );
            }
        );
    }
}

import {BrowserModule} from '@angular/platform-browser';
import {ErrorHandler, NgModule} from '@angular/core';
import {IonicApp, IonicErrorHandler, IonicModule} from 'ionic-angular';
import {SplashScreen} from '@ionic-native/splash-screen';
import {StatusBar} from '@ionic-native/status-bar';
import {MyApp} from './app.component';
import {HomePage} from '../pages/home/home';
import {AuthService} from "../services/auth.service";
import {DashboardPage} from "../pages/dashboard/dashboard";
import {ConnectionPage} from "../pages/connection/connection";
import {HelpPage} from "../pages/help/help";
import {ContactGdzPage} from "../pages/contact-gdz/contact-gdz";
import {ListeServicePage} from "../pages/liste-service/liste-service";
import {ApiGdz} from "../services/apiGdz.service";
import { HttpClientModule } from '@angular/common/http';

@NgModule({
    declarations: [
        MyApp,
        HomePage,
        DashboardPage,
        ConnectionPage,
        HelpPage,
        ContactGdzPage,
        ListeServicePage,
    ],
    imports: [
        BrowserModule,
        HttpClientModule,
        IonicModule.forRoot(MyApp),
    ],
    bootstrap: [IonicApp],
    entryComponents: [
        MyApp,
        HomePage,
        DashboardPage,
        ConnectionPage,
        HelpPage,
        ContactGdzPage,
        ListeServicePage,
    ],
    providers: [
        StatusBar,
        SplashScreen,
        {provide: ErrorHandler, useClass: IonicErrorHandler},
        AuthService,
        ApiGdz,
    ]
})
export class AppModule {
}

问题可能是“ HttpClient”必须来自构造函数。在这种情况下，如何使用参数实例化“ DashboardPage”中的“ http”对象？

感谢您的帮助

Answer 1

首先让我说我不是Ionic开发人员，所以我可能不知道该环境所需的某些特定信息，我只能说说代码的Angular部分。鉴于此，我必须根据上面问题中发布的内容进行假设，尽管它看起来如何，但实际上您发布了3个DIFFERENT文件中的代码。我的假设是文件＃1是组件，其名称可能类似于dashboard.component.ts，看起来像您发布内容的第一部分：

import {Component} from '@angular/core';
import {IonicPage, NavController, NavParams} from 'ionic-angular';
import {Observable} from 'rxjs/Observable';
import {HttpClient} from "@angular/common/http";
import {ContactGdzPage} from "../contact-gdz/contact-gdz";
import {ListeServicePage} from "../liste-service/liste-service";
import {ApiGdz} from "../../services/apiGdz.service";

@IonicPage()
@Component({
    selector: 'page-dashboard',
    templateUrl: 'dashboard.html',
})
export class DashboardPage {

    constructor(private apiGdz: ApiGdz,  public http: HttpClient) {

        this.apiGdz.callApi().then(
            (data) => {

                console.log('ok', data);
            },
            (error) => {
                console.log('!ok', error);
            }
        );
    }
}

然后有一个单独的服务文件（似乎已导入到上面的组件中），称为apiGdz.service.ts，看起来像这样：

import {HttpClient} from "@angular/common/http";

export class ApiGdz {

    public http: HttpClient;

    constructor() {}

    callApi() {
        return new Promise(
            (resolve, reject) => {
                this.http.get('https://swapi.co/api/films').subscribe(
                    (data) => {
                        resolve(data);
                    },
                    (error) => {
                        reject(error);
                    }
                );
            }
        );
    }
}

最后，您还包括了基本模块文件，其名称可能类似于app.module.ts，如下所示：

import {BrowserModule} from '@angular/platform-browser';
import {ErrorHandler, NgModule} from '@angular/core';
import {IonicApp, IonicErrorHandler, IonicModule} from 'ionic-angular';
import {SplashScreen} from '@ionic-native/splash-screen';
import {StatusBar} from '@ionic-native/status-bar';
import {MyApp} from './app.component';
import {HomePage} from '../pages/home/home';
import {AuthService} from "../services/auth.service";
import {DashboardPage} from "../pages/dashboard/dashboard";
import {ConnectionPage} from "../pages/connection/connection";
import {HelpPage} from "../pages/help/help";
import {ContactGdzPage} from "../pages/contact-gdz/contact-gdz";
import {ListeServicePage} from "../pages/liste-service/liste-service";
import {ApiGdz} from "../services/apiGdz.service";
import { HttpClientModule } from '@angular/common/http';

@NgModule({
    declarations: [
        MyApp,
        HomePage,
        DashboardPage,
        ConnectionPage,
        HelpPage,
        ContactGdzPage,
        ListeServicePage,
    ],
    imports: [
        BrowserModule,
        HttpClientModule,
        IonicModule.forRoot(MyApp),
    ],
    bootstrap: [IonicApp],
    entryComponents: [
        MyApp,
        HomePage,
        DashboardPage,
        ConnectionPage,
        HelpPage,
        ContactGdzPage,
        ListeServicePage,
    ],
    providers: [
        StatusBar,
        SplashScreen,
        {provide: ErrorHandler, useClass: IonicErrorHandler},
        AuthService,
        ApiGdz,
    ]
})
export class AppModule {
}

如果一切正确，那么我建议对组件和服务进行较小的更改。

首先是服务。在Angular中使用服务的好处之一是它们可以隐藏组件中的详细信息，例如您通过http从后端服务器获取真实数据这一事实。因此，您的服务将如下所示：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({ providedIn: 'root' })
export class ApiGdz {

    constructor(private http: HttpClient) {}

    callApi() {
        return new Promise(
            (resolve, reject) => {
                this.http.get('https://swapi.co/api/films').subscribe(
                    (data) => {
                        resolve(data);
                    },
                    (error) => {
                        reject(error);
                    }
                );
            }
        );
    }
}

现在可以更改您的组件，使其对http一无所知，只需依靠注入的服务来处理这些细节。现在看起来像这样：

import {Component} from '@angular/core';
import {IonicPage, NavController, NavParams} from 'ionic-angular';
import {Observable} from 'rxjs/Observable';
// import {HttpClient} from "@angular/common/http";  // <-- DELETE THIS LINE
import {ContactGdzPage} from "../contact-gdz/contact-gdz";
import {ListeServicePage} from "../liste-service/liste-service";
import {ApiGdz} from "../../services/apiGdz.service";

@IonicPage()
@Component({
    selector: 'page-dashboard',
    templateUrl: 'dashboard.html',
})
export class DashboardPage {

    constructor(private apiGdz: ApiGdz) {

        this.apiGdz.callApi().then(
            (data) => {

                console.log('ok', data);
            },
            (error) => {
                console.log('!ok', error);
            }
        );
    }
}

希望这一切都有道理。

编码愉快。：）

调用http请求的方法的困难

1 个答案: