如何从提供商

时间:2018-05-26 14:16:23

标签: typescript ionic-framework

我正在研究离子应用中的认证部分。移动应用程序连接到弹簧启动应用程序,该应用程序包含登录功能并返回用户的文凭列表。 我将在移动应用程序中使用此信息,因此我必须检查提供程序函数是否返回非空的列表。 提供程序功能完美,但我不知道如何返回组件中的列表。 这是loginProvider:

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

@Injectable()
export class LoginProvider {

  constructor(public http: HttpClient) { }

  public url = "http://localhost:8080/";

  login(user: any) {
    return this.http.post(this.url+'user/loginEmp',user)
        .subscribe((res: Response ) => console.log(res));
    }
}

这是loginPage:

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { TabsPage } from '../tabs/tabs';
import { Md5 } from 'ts-md5/dist/md5';
import { LoginProvider } from '../../providers/login/login';
import 'rxjs/add/operator/toPromise';


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

  authForm: FormGroup;
  showError: boolean = false;
  loginError: string;

  constructor(public nav: NavController,
              public navParams: NavParams, 
              public formBuilder: FormBuilder,
              private loginProvider : LoginProvider) {

      this.authForm = formBuilder.group({
        'email': ['', Validators.compose([Validators.required,Validators.email])],
        'password': ['', Validators.compose([Validators.required, Validators.minLength(6)])]
      });
  }

  onSubmit(login:any) {
    let user: any = {
      "email": login['email'].trim(),
      "password" : Md5.hashStr(login['password']).toString()
    };
    this.loginProvider.login(user).subscribe((response)=> {
      console.log(response)
      if(!this.isEmpty(response)){
          sessionStorage.setItem("CurrentUser", JSON.stringify(response));
          this.nav.push(TabsPage);   
      }else{
          this.showError = true;
      }
    });
  }
  // this function return true if the object in argument is empty
  isEmpty(obj) {
    for(var key in obj) {
        if(obj.hasOwnProperty(key))
            return false;
    }
    return true;
  }
}

在控制台中我得到了列表,但“console.log(response)”显示“未定义”

2 个答案:

答案 0 :(得分:0)

您似乎正在返回Observable

中已订阅的Provider的结果

我正在从事离子应用中的认证工作。移动应用程序连接到包含登录功能的弹簧启动应用程序并返回用户的文凭列表。我将在移动应用程序中使用此信息,因此我必须检查提供程序函数是否返回列表,而不是emplty。提供程序功能完美运行,但我不知道如何返回组件中的列表。这是loginProvider。将您的login()方法更改为如下所示。

  login(user: any) {
    return this.http.post(this.url+'user/loginEmp',user)

    }

答案 1 :(得分:0)

更改您的登录提供商使用地图,而不是使用订阅两次

login(user: any) {
    return this.http.post(this.url+'user/loginEmp',user)
        .map(res => res.json());
    }