ionic2- 来自 HTTP 请求的响应显示为未定义

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，但当我控制台.log() 它时我变得未定义。API 正在返回一个对象。

谁能说出我犯了什么错误。

ionic info返回以下内容：

cli packages: (C:UsersDemoAppDataRoamingnpmnode_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 调用是异步的，但您正在尝试同步执行

在您的服务中，您不需要订阅，只需返回可观察并订阅它 在组件文件中

服务文件：

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

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