javascript - 具 Angular 单击事件必须单击两次才能完成操作

Question

我的按钮有问题。该按钮是登录按钮。当我在输入凭据后单击回车时，将触发查看凭据是否正确的方法。这没有任何问题。

但还应该发生的是，在检查这些凭据是否正确之后，登录和注册按钮应该会被删除，同时会出现一个新的配置文件按钮。

为了让之前的事情发生，我必须再次按下按钮才能使这些按钮消失。

我不太确定问题出在哪里...这是我的代码。希望不要太多。我把不需要的都去掉了。

App.component.html(angular 的主要组件)

<div class="dropdown">
  <button *ngIf="loggedOff" class="btn" type="button" data-toggle="dropdown">Login
  </button>
  <ul *ngIf="loggedOff" class="dropdown-menu">
    <li>
      <button class="btn" id="loginButton" type="button" (click)="submit(username.value, pword.value)">
        Go!
      </button>
    </li>

  </ul>

应用程序组件.ts

export class AppComponent {
  loggedin: boolean;
  loggedOff: boolean;

  ngOnInit() {
    this.loggedin = false;
    this.loggedOff = true;
  }
  constructor(private loginService: LoginService,) { }

  submit(username: string, pword: string)
  {
    this.loggedin = this.loginService.signIn(username, pword);
    if(this.loggedin == true)
    {
      this.loggedOff = false;
    }
  }

登录服务.ts

  signIn(username: string, pword: string) : boolean
  {
    let sendData = new FormData();

    this.http.post(this.loginURL, sendData, {responseType: 'text'}).subscribe(res => {
      if(res.includes("Good")){
        this.loginAttempt = true;
      }else
        this.loginAttempt = false;
    });
    return this.loginAttempt;
  }

我想它可能与 Http 调用有关？但是，我不太确定......我假设我描述的整个过程是同步的......也许不是？

Answer 1

正如有人已经指出的那样，Http 调用是异步的，因此您不能期望从您的服务返回的值会立即填充。

相反，您必须从消费者异步订阅它，在本例中是组件。像这样重构服务和组件就可以解决问题:

// login.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class LoginService {
  private loginURL = 'http://...';

  constructor(private httpClient: HttpClient) { }

  signIn(username: string, password: string): Observable<string> {
    return this.httpClient.post(this.loginURL, { username, password }, { responseType: 'text' });
  }
}

// app.component.ts
export class AppComponent {
  isLoggedIn: boolean;

  constructor(private loginService: LoginService) { }

  submit(username: string, password: string) {
    this.loginService.signIn(username, password).subscribe(res => {
      this.isLoggedIn = res.indexOf('Good' >= 0);
    });
  }
}

不要忘记相应地编辑模板! :)