Angular 角度样式显示/隐藏条件不起作用

我试图在点击图像时显示隐藏导航栏。第一次单击时，它工作，之后就不工作了。不知道怎么了。需要帮忙吗

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

2） 单击图标（在左上角），工具栏应该隐藏-它第一次工作

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

改变

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

到

或

将toggleNavbar功能更改为

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

改变

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

到

或

将toggleNavbar功能更改为

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

---

在typescript文件中添加一个包含逻辑的属性，如下所示：

get showNavBar(): boolean {
    return this.displayNavBar === 1;
 }

---

然后可以使用带有该属性的*ngIf来显示或隐藏元素

在typescript文件中添加一个属性，该属性包含如下逻辑：

get showNavBar(): boolean {
    return this.displayNavBar === 1;
 }

---

然后可以使用带有该属性的*ngIf来显示或隐藏元素

不要使用1和0进行切换，请尝试使用true或false，如下所示，这将简化代码并加快渲染速度

组件技术

html

---

不要使用1和0进行切换，请尝试使用true或false，如下所示，这将简化代码并加快渲染速度

组件技术

html

---

---

使用

[hidden]

和布尔标志可以更轻松地完成此操作。或者

*ngIf

@AJT\u 82:这是stackblitz。如果你能帮我。。。如前所述，这里使用的是

[hidden]

和布尔标志。更干净；）非常感谢@AJT_82。它工作得很好……：）非常欢迎：）使用

[hidden]

和布尔标志可以更轻松地完成此操作。或者

*ngIf

@AJT\u 82:这是stackblitz。如果你能帮我。。。如前所述，这里使用的是

[hidden]

和布尔标志。更干净；）非常感谢@AJT_82。它工作得很好……：）非常欢迎：）谢谢你的回答，你说的很有道理。。。但是我不知道为什么它对我不起作用……不，我在我的任何cssIt中都没有这样的课程需要工作，这与CSS无关。检查这个：我创建了这个带有问题的示例。谢谢你的回答，你说的很有道理。。。但是我不知道为什么它对我不起作用……不，我在我的任何cssIt中都没有这样的课程需要工作，这与CSS无关。检查这个：我创建了这个带有问题的示例。请您也给我介绍一下*ngIf部分好吗？在html中调用函数是不好的做法，因为每次运行更改检测时都会调用它，这可能非常困难often@SK. 您可以这样做，并且只有当showNavBar结果为true时，才会显示该div。请您也给我介绍一下*ngIf部分好吗？在html中调用函数不是一个好做法，因为每次运行更改检测时都会调用该函数，这可能非常困难often@SK. 您可以这样做，只有当showNavBar结果为true时，才会显示该div。

get showNavBar(): boolean {
    return this.displayNavBar === 1;
 }

 displayNavbar: string;ngOnInit() {
    this.displayNavbar = false; // on init based on the logic set it to true or false
}

toggleNavbar() {
this.displayNavbar = ! this.displayNavbar; //toggle between true or false dynamically
}

  <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) ? {'visibility': 'visible'} : {'visibility': 'hidden'}">