Angular 2同步Http服务

Question

目前我正面临有关角度js 2中的登录身份验证的问题。 因为我正在面对与以下代码中的异步相关的问题。

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

    import { Http } from '@angular/http'; 
    import { UserData } from './UserData'; 
    import 'rxjs/add/operator/map' 
    import 'rxjs/add/operator/toPromise' 

    @Injectable() 
    export class LoginserviceService { 

    userData = new UserData('',''); 

    constructor(private http:Http) { } 

    callService(username:string,passwrod:string):boolean { 
    var flag : boolean;  
    (this.http.get('http://localhost:4200/data.json'). 
    map(response => response.json())).subscribe(
    data => this.userData = data , 
    error => alert(), 
    () => { 
     flag = this.loginAuthentication(username,passwrod); 
    }   
);  
    return flag; 
} 

loginAuthentication(username:string,passwrod:string):boolean{ 
if(username==this.userData.username && passwrod==this.userData.password){ 
    return true; 
}else{ 
    return false; 
} 
} 

当我在传递currect用户名和密码后执行此代码时，它仍然返回false。

return flag 

之前

flag = this.loginAuthentication(username,passwrod); 

执行，最后我得到的结果为假。

有没有办法，如果我可以使用同步方法或角2

低于承诺的任何解决方案组件代码

import { Component, OnInit } from '@angular/core'; 
import { LoginserviceService } from '../loginservice.service'; 

@Component({ 
    selector: 'app-login', 
    templateUrl: './login.component.html', 
    styleUrls: ['./login.component.css'] 
}) 
export class LoginComponent implements OnInit { 
model:any={}; 

constructor(private service : LoginserviceService) { 

} 

ngOnInit() { 

} 
save() { 

var flag = this.service.callService(this.model.userName,this.model.passWord); 
    if(flag==true) 
    { 
    console.log("login Successfully done-----------------------------") 
    this.model.success = "Login Successfully done"; 
    } 

} 

} 

Answer 1

我觉得你这样做是正确你的问题 - 这是一个同步/异步问题。你所做的http调用本质上是异步的，我认为这是你应该如何处理它们的。

我会建议你在你的服务回报可观察和处理您组件类的响应 - 这里是用最少的调整你的代码fromt他服务类：

callService(username:string,passwrod:string):Observable<boolean> { 
    var flag : boolean;  
    return (this.http.get('http://localhost:4200/data.json'). 
    map(response => response.json())). 
    map(data => { 
     this.userData = data; 
     return this.loginAuthentication(username,passwrod); 
    }); 
} 

然后在你的组件类，你现在可以调用这样的保存方法：

save() { 
    this.service.callService(this.model.userName,this.model.passWord). 
    subscribe(
     success => { 
      if(success) { 
       console.log("login Successfully done-----------------------------"); 
       this.model.success = "Login Successfully done"; 
      }, 
     error => console.log("login did not work!") 
    ); 
} 

这应该现在工作。我没有测试代码，所以它可能不会用完，但我希望这一点很明确。

Answer 2

请查看esef 给出的答案详情下面是组件和服务文件。代码工作正常。

import { Component, OnInit } from '@angular/core'; 
import { LoginserviceService } from '../loginservice.service'; 

@Component({ 
    selector: 'app-login', 
    templateUrl: './login.component.html', 
    styleUrls: ['./login.component.css'] 
}) 
export class LoginComponent implements OnInit { 
    model:any={}; 
    constructor(private service : LoginserviceService) { 
} 

ngOnInit() { 

} 
save() { 
    this.service.callService(this.model.userName,this.model.passWord). 
    subscribe(
     success => { 
     if(success) { 
      console.log("login Successfully done---------------------------- -"); 
      this.model.success = "Login Successfully done"; 
    }}, 
    error => console.log("login did not work!") 
); 
} 

} 

下面是服务文件..

import { Injectable } from '@angular/core'; 
import { Http } from '@angular/http'; 
import { UserData } from './UserData'; 
import 'rxjs/add/operator/map' 
import 'rxjs/add/operator/toPromise' 
import {Observable} from 'rxjs/Rx' 

@Injectable() 
    export class LoginserviceService { 
    userData = new UserData('',''); 
    constructor(private http:Http) { } 

    callService(username:string,passwrod:string):Observable<boolean> { 
    var flag : boolean;  
    return (this.http.get('http://localhost:4200/data.json'). 
     map(response => response.json())). 
     map(data => { 
      this.userData = data; 
      return this.loginAuthentication(username,passwrod); 
     }); 
     } 

    loginAuthentication(username:string,passwrod:string):boolean{ 
    if(username==this.userData.username && passwrod==this.userData.password){ 
     console.log("Authentication successfully") 
     return true; 
    }else{ 
    return false; 
    } 


    } 
}