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

我的按钮有问题。该按钮是一个登录按钮。键入凭据后单击enter时，查看凭据是否正确的方法将启动。这项工作没有任何问题

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

为了使前面的事情发生，我必须再次按下按钮，使这些按钮消失

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

App.component.html（angular的主要组件）

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调用？但是，我不是很确定。。。我假设我描述的整个过程是同步的。。也许不是这样？

正如已经有人指出的那样，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);
    });
  }
}

//login.service.ts
从“@angular/core”导入{Injectable}；
从'@angular/common/http'导入{HttpClient}；
从“rxjs”导入{Observable}；
@可注射（）
导出类登录服务{
私人罗吉努尔酒店http://...';
构造函数（私有httpClient:httpClient）{}
登录（用户名：string，密码：string）：可观察{
返回this.httpClient.post（this.loginURL，{username，password}，{responseType:'text'}）；
}
}
//app.component.ts
导出类AppComponent{
伊斯洛格丁：布尔；
构造函数（私有登录服务：登录服务）{}
提交（用户名：字符串，密码：字符串）{
this.loginService.sign（用户名、密码）。subscribe（res=>{
this.isLoggedIn=res.indexOf（'Good'>=0）；
});
}
}

---

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

在登录服务中，向上移动返回。现在，您可以在loginateten init之前立即返回'this.loginAttemlt'。这就是为什么它只在第二次起作用我不知道你的意思。。把回程调高？我想我这样做了，但是我仍然得到相同的结果return语句需要在subscribe函数的作用域内。LoginAttest是否应该是观察者？在日志服务中，删除这一行“returnthis.loginAttest；”在'if'中，输入'return true'，在else中输入'return false'，这样委托login/signup/profile按钮的布尔值需要是loginService的可观察值？@JD333对

HttpClient

的任何调用都将返回可观察流。从这个意义上说，代码的问题在于，在实际分配之前，您将

this.loginatetest

返回到使用者组件，因为分配发生在异步并行线程中。@JD333答案是否有助于解决您的问题？如果是，请将其标记为已解决，以便其他人可以从中受益。谢谢：）

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

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