Question

我的按钮有问题。该按钮是登录按钮。键入凭据后单击Enter时，将触发查看凭据是否正确的方法。这可以正常工作。

但是，还应该发生的是，在检查了这些凭据是否正确之后，应该删除登录和注册按钮以及将出现的新配置文件按钮。

为了使上一件事发生，我必须再次点击按钮以使这些按钮消失。

我不太确定问题出在哪里……这是我的代码。希望它不会太多。我拿出了不必要的东西。

App.component.html（角度的主要组件）

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

App.component.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;
    }
  }

loginService.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);
    });
  }
}

不要忘记相应地编辑模板！：）

必须单击两次带有角度的点击事件才能完成操作

1 个答案: