событие щелчка с углом должно быть дважды нажато, чтобы завершить действие

Question

У меня проблема с моей кнопкой.Кнопка является кнопкой входа в систему.Когда я нажимаю клавишу ввода после ввода учетных данных, запускается метод проверки правильности учетных данных.Это работает без проблем.

Но что также должно произойти, после проверки их, если учетные данные верны, кнопка входа в систему и регистрации должна быть удалена вместе с кнопкой нового профиля, которая появится.

Чтобы предыдущая вещь произошла, мне нужно нажать кнопку еще раз, чтобы эти кнопки исчезли.

Я не совсем уверен, в чем проблема ... вот мой код.Надеюсь, это не так уж и много.Я вынул все, что не нужно.

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

Не забудьте отредактировать шаблон соответственно! :)