css - 在 edge 中不起作用，但在 IE11 和其他浏览器中起作用

Question

我有一个 angular 5.2.8 应用程序。它包含一些代码:

  <div class="login-box">
    <div (click)="toggleMenu()">
      <span class="loginShortTitle">
        <i class="fa fa-user-circle"></i> Login</span>
    </div>
    <div [hidden]="!menuIsOpen">
      <form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm)">
        <input type="text" name="username" ngModel>
        <input type="password" name="password" ngModel>
        <input type="submit" value="Login">
      </form>
    </div>
  </div>

组件有:

public toggleMenu() {
   this.menuIsOpen = !this.menuIsOpen;
}

在 firefox、chrome 和 IE 11 中，点击顶部的 div 将显示登录表单。然而，在 Edge 41 中却没有。控制台中没有显示错误/警告...

当我在 edge 中使用 F12 开发人员工具检查元素并更改 clickable-div 的 CSS 时，我认为这可能是 CSS 问题；添加“position:relative；”它突然变得可点击。即使开发人员工具栏在 position: relative 部分显示删除线效果，就好像它被忽略了一样。删除该属性仍会使其保持可点击状态。

CSS:

.login-box {
  float: right;
  top: 0px;
  right: 0px;
  display: block;
  min-width: 12em;
}
.loginShortTitle {
  padding: 1ex 1ex;
  margin: auto 0;
  display: block;
}

我很困惑...有人知道发生了什么事吗？

---编辑:我将 toggleMenu() 函数修改为:

public toggleMenu() {
   this.menuIsOpen = !this.menuIsOpen;
   window.console.log('clicked toggleMenu');
   window.console.log('Value of this.menuIsOpen=' + (this.menuIsOpen ? 'True' : 'False'));
}

它会记录所有点击，即使在 Edge 中也是如此。这些值符合预期。但是，除此之外，CSS/HTML 中什么也没有发生。

---

根据要求，完整组件:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AuthenticationService } from '../auth/authentication.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  public menuIsOpen = false;

  constructor(
    public auth: AuthenticationService,
    public route: ActivatedRoute,
    public router: Router
  ) { }

  ngOnInit() {
  }

  onSubmit(f) {
    const username = f.value.username;
    const password = f.value.password;

    this.auth.login(username, password).subscribe(
      success => {
        this.closeMenu();
      },
      error => {
      }
    );
  }

  openMenu(): void {
    this.menuIsOpen = true;
  }
  closeMenu(): void {
    this.menuIsOpen = false;
  }
  toggleMenu(): void {
    this.menuIsOpen = !this.menuIsOpen;
  }

  logout() {
    this.auth.logout();
    this.menuIsOpen = false;
  }
}

Answer 1

显然问题出在 [hidden]="!menuIsOpen" 部分。在 Edge 中它不会显示该元素。将其切换为 *ngIf="menuIsOpen" 可以解决问题。