Angular ngStyle 显示/隐藏条件不起作用

Question

我试图在单击图像时显示隐藏我的导航栏。第一次点击它可以工作，之后就不行了。不知道出了什么问题。请问有什么帮助吗？？？

https://stackblitz.com/edit/responsive-menu-angular-material-flex-layout-cm87il

<img id="project-avatar" (click)="toggleNavbar()" width=20, height=20 style="position: relative;" alt="Show Hide Navigation Menu" src="/assets/img/slider_hide.png" />
<div> 

<div class="showHideNavbar" [ngStyle]="displayNavbar == '1' ? {'visibility': 'visible'} : {'visibility': 'hidden'}">
  <mat-toolbar color="primary" >

组件.ts

displayNavbar: string;

ngOnInit() {
    this.displayNavbar = '1';
}

toggleNavbar() {

    if(this.displayNavbar == '0') {
        this.displayNavbar = '1';
        alert(this.displayNavbar);
    } if(this.displayNavbar == '1') {
    //    alert("1 - Changing to 0");
        this.displayNavbar = '0';
    } else {
        this.displayNavbar = '1';
    }
}

1）加载工具栏应显示的页面 - 它按预期显示

2）单击图标（位于左上角）时，工具栏应隐藏 - 这是第一次工作

3）再次单击该图标时，工具栏应再次显示 - 它不起作用

https://stackblitz.com/edit/responsive-menu-angular-material-flex-layout-cm87il

Answer 1

改变

 [ngStyle]="displayNavbar == '1' ? {'visibility': 'visible'} : {'visibility': 'hidden'}"

到

 [ngStyle]="{'visibility': displayNavbar == '1' ? 'visible' : 'hidden'}"

或者

[style.visibility]="displayNavbar == '1' ? 'visible' : 'hidden'"

将切换导航栏功能更改为

toggleNavbar() {
   this.displayNavbar = (this.displayNavbar == '1') ? '0' : '1'
}

StackBlitz 链接