为什么我需要在按钮上单击 2 次才能发生事件？

如何解决为什么我需要在按钮上单击 2 次才能发生事件？

我正在制作一个用于用户登录的应用程序。在此文件 AuthenticationService 中，我与 C# 控制器进行通信。

export class AuthenticationService {
  constructor(private http: HttpClient) { }

  readonly APIUrl = 'https://localhost:44309/api';

  isAuthorized:any;

  Login(val:any){
    return this.http.post(this.APIUrl+'/Login',val);
  }

  Authorize(isAuthorized:boolean)
  {
    this.isAuthorized =  isAuthorized;
  }
}

在此文件 LoginComponent 中，我调用了 Login() 中的 AuthenticationService 方法，因此用户详细信息的验证发生在后端。

export class InloginComponent implements OnInit {

  constructor(private Auth : AuthenticationService,private router: Router) { }
  formModel = {
    Email: '',Password: ''
  }
  GebruikerList:any;
  geb:any;
  isAuthorized: any;
  ngOnInit(): void {
  }

  Login()
  {
    this.geb={
      Email: this.formModel.Email,Wachtwoord: this.formModel.Password
    }
    this.Auth.Login(this.geb).subscribe(data => this.isAuthorized = data)
    this.Auth.Authorize(this.isAuthorized);

    if(this.isAuthorized) { this.router.navigate(['profile'])}
  }
}

---

验证后，它要么返回 true 或 false。
当它是 true 时，它应该将用户带到个人资料页面。 Login() 顺便说一下绑定到登录按钮。 问题是，我必须点击登录按钮两次（当用户的详细信息有效时）才能进入页面。为什么会这样？

解决方法

flow 看起来是正确的，但改成这样。 当您第二次单击时，由于先前的 api 响应，isAuthorized 变为真，因此单击第二次有效 试试这个：

this.Auth.Login(this.geb).subscribe(data => {
    this.isAuthorized = data
    this.Auth.Authorize(this.isAuthorized);
    if(this.isAuthorized) { this.router.navigate(['profile'])}
}