angular - 登录表单成功时隐藏模式

Question

如果我的登录成功，我只是试图关闭模式。

当我在代码中的任何位置添加 basicModal.hide() 方法时，登录按钮就会消失。

HTML：

<!-- loginModal -->
<div class="container">
  <div class="modal fade" id="loginModalCenter" #loginModalCenter tabindex="-1" role="form" aria-labelledby="ModalCenterTitle"
    aria-hidden="true">

....

          <!-- Sign in button -->
          <button class="btn btn-success btn-block my-4" type="submit">Login</button>

        <!-- form login -->

TS：……

    this.loading = true;
    this.authenticationService
      .login(this.f.email.value, this.f.password.value, result => {
        if (result) {
          console.log('Logged in ' + result);
          this.loginModalCenter.hide();
        } else {
          console.log('not a valid user');
        }
      });
    }
}

Answer 1

You can use a boolean to do so. Set a bool loggedIn = true on your class, then set a *ngIf="!loggedIn" on your loginModalCenter.

Finally simply set loggedIn to true on login function result.

So TS:

//before constructor()
loggedIn: boolean = false;


//On login
this.authenticationService
  .login(this.f.email.value, this.f.password.value, result => {
    if (result) {
      console.log('Logged in ' + result);
      this.loginModalCenter.hide();
      this.loggedIn = true;
    }

And on template:

<div class="modal fade" *ngIf="!loggedIn" id="loginModalCenter" #loginModalCenter tabindex="-1" role="form" aria-labelledby="ModalCenterTitle"
aria-hidden="true">

Hope that helps !