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


    } 
}