Pesquisa de site

typescript - Angular ngStyle condição de exibir/ocultar não está funcionando

Estou tentando mostrar e esconder minha barra de navegação ao clicar em uma imagem. No primeiro clique funciona, depois disso não. Não tenho certeza do que está errado. Alguém pode me ajudar, por favor???

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" >

componente.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) Ao carregar a página, a barra de ferramentas deve ser exibida - está sendo exibida conforme o esperado

2) Ao clicar no ícone (no canto superior esquerdo), a barra de ferramentas deve ser ocultada - está funcionando na primeira vez

3) Ao clicar no ícone novamente, a barra de ferramentas deveria aparecer novamente - não está funcionando

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

Resposta #1

mudar

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

para

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

ou

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

alterar a função toggleNavbar para

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

Link do StackBlitz

Resposta #2

Em vez de usar 1 e 0 para alternar, tente usar true ou false como no exemplo a seguir, o que simplificará o código e renderizará mais rápido

Componente.ts

 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
}

html

  <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'}">

Artigos relacionados