javascript - 在 function1() 内部调用 function2() 但它在 .subscribe() 之前被触发

Question

我的login.component.ts中有2个函数，我想在function1()结束后立即调用function2()，但它正在被调用在 .subscribe() 之前。为什么会发生这种情况以及如何纠正它？

下面是我的代码:

import { Component, OnInit } from '@angular/core';
import { Injectable } from '@angular/core';
import { HttpModule  } from '@angular/http';
import { Headers, Http } from '@angular/http';
import { LoginService } from './login.service';
import 'rxjs/add/operator/map';

@Component({
  providers: [LoginService],
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})


export class LoginComponent implements OnInit {
     public user_form_value = 'info@lamchemical.com';
     public password_form_value = 'lam';
     public loggeduser_array = [];

     constructor(private _loginService: LoginService) { }

     login2(){
    console.log(this.user_form_value);
    console.log(this.password_form_value);
    this._loginService.login(this.user_form_value, this.password_form_value).subscribe(
      res =>{
        console.log(res.user);
      localStorage.setItem("getLoggedInUserANG",JSON.stringify(res.user));
      this.loggeduser_array  = JSON.parse(localStorage.getItem("getLoggedInUserANG"));
     // console.log((this.loggeduser_array as any).name);
      console.log(this.loggeduser_array["name"]);    
    }
      )
   this.login_true_2();
  }


login_true_2(){
  if(localStorage.getItem("getLoggedInUserANG") != null) {
		alert("you are in");
	} else {
		alert("Wrong username or password");
	}
}

 
 ngOnInit() {
}
}

为了更清楚地解释，让我添加数字作为哪个回合正在执行的内容

1. 我在控制台中看到此消息 - console.log(this.user_form_value)

2. 然后我看到 - console.log(this.password_form_value)

3. 然后我看到警报 - alert("用户名或密码错误")

4. 然后我看到 - console.log(res.user) 最后

5. console.log(this.loggeduser_array["name"])

现在，如果我再次按下按钮来调用 login2() 函数，这次我会看到警报 - alert("you are in")，为什么第二次，我想让它第一次工作。

Answer 1

您需要在订阅处理程序中调用 login_true_2 方法，否则它将在设置本地存储之前调用，因为 login 方法是异步的。

第二次它可以工作，因为当第二次单击发生时，本地存储值已经由第一次调用设置。

  login2() {
    console.log(this.user_form_value);
    console.log(this.password_form_value);
    this._loginService.login(this.user_form_value, this.password_form_value).subscribe(
      res => {
        console.log(res.user);
        localStorage.setItem("getLoggedInUserANG", JSON.stringify(res.user));
        this.loggeduser_array = JSON.parse(localStorage.getItem("getLoggedInUserANG"));
        // console.log((this.loggeduser_array as any).name);
        console.log(this.loggeduser_array["name"]);
        this.login_true_2();
      }
    )
  }