Question

我创建了一个具有许多功能的提供程序，并且每个提供程序都向API服务器执行HTTP请求。我在创建提供程序后更新了app.module.ts。

我试图将从api服务获得的数据返回到注入此提供程序的页面。

这是我的提供者：

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

@Injectable()
export class LoginServicesProvider {
  apiUrl: string = 'API URL COMES HERE';
  constructor(public http: Http) {
  }

  login(reqData) {
    this.http.post(apiUrl+'/checkLogin', reqData).map(res => res.json()).subscribe(data => {
      return data;
    });
  }

}

这是注入此提供者的地方：

import { LoginServicesProvider } from './../../providers/login-services/login-services';
import { Http } from '@angular/http';
import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'page-login-page',
  templateUrl: 'login-page.html',
})
export class LoginPage {

  loginServiceData: Observable<any>;
  constructor(public navCtrl: NavController,
    public navParams: NavParams,
    private http: Http,
    private loginService: LoginServicesProvider
    ) 
    {  
        let userName: string = 'dumy_user_name';
        let userPassword: string = '12345';
        let data = {
            username: userName,
            password: userPassword,
        };

        this.loginServiceData = this.loginService.login(data);
        console.log(this.loginServiceData);      
    }
}

当我运行项目时，会生成http，但是当我在console.log（）它时，我得到了未定义。 API正在返回一个对象。

任何人都能说出我犯的错误。

ionic info会返回此信息：

cli packages: (C:\Users\Demo\AppData\Roaming\npm\node_modules)

    @ionic/cli-utils  : 1.19.0
    ionic (Ionic CLI) : 3.19.0

global packages:

    cordova (Cordova CLI) : not installed

local packages:

    @ionic/app-scripts : 3.1.2
    Cordova Platforms  : android 6.2.3 browser 5.0.3
    Ionic Framework    : ionic-angular 3.9.2

System:

    Android SDK Tools : 26.1.1
    Node              : v6.12.0
    npm               : 5.6.0
    OS                : Windows 10

Answer 1

API调用是异步的，但您尝试同步执行

在您的服务中，您无需订阅，只需返回Observable并订阅即可在组件文件

中

服务档案：

login(reqData) {
    return this.http.post(apiUrl+'/checkLogin', reqData).map(res => res.json())
}

组件文件：

this.loginService.login(data).subscribe((data: any) => {
    this.loginServiceData = data;
    console.log(this.loginServiceData);      
})

现在，您将能够在控制台中看到正确的对象。

来自http请求的ionic2-响应显示为undefined

1 个答案: