登录表单成功后隐藏模式

时间:2018-10-24 09:57:08

标签: angular modal-dialog hide mdbootstrap

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

当我在代码中的任意位置添加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');
        }
      });
    }
}

1 个答案:

答案 0 :(得分:0)

您可以使用布尔值来做到这一点。 在您的课程上设置bool loggingIn = true,然后在loginModalCenter上设置* ngIf =“!loggedIn”。

最后只需在登录功能结果上将loginIn设置为true。

所以TS:

    import java.util.ArrayList;
    import java.util.Collections;
    import java.util.List;

    public class Test{
        public static void main(String[] args) {
            List<Human> humans= new ArrayList<Human>();
            humans.add(new Human(13));
            humans.add(new Human(33));
            humans.add(new Human(21));
            humans.add(new Human(21));
            Collections.sort(humans); 
            System.out.print(humans.get(0).age);
            System.out.print(humans.size()); 
        }
    }
    class Human implements Comparable<Human> {
        Integer age;
        public Human(int age) {
            this.age = age;
        }
        public int compareTo(Human h) {
            return h.age.compareTo(this.age);
        }
    }

在模板上:

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

希望有帮助!