typescript - Angular ngStyle visa/dölj villkor fungerar inte

Jag försöker visa eller dölja min navigeringsfält när jag klickar på en bild. Vid första klick fungerar det, efter det gör det inte det. Vet inte vad som är fel. Någon hjälp, tack???

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

komponent.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) När sidan laddas ska verktygsfältet visas - det visas som förväntat

2) När ikonen klickas på (uppe till vänster), ska verktygsfältet gömma sig - det fungerar första gången

3) Vid klick på ikonen igen bör verktygsfältet visas igen - det fungerar INTE

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

Svar #1

ändra

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

till

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

eller

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

ändra toggleNavbar-funktion till

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

StackBlitz-länk

Svar #2

Istället för att använda 1 och 0 för att växla, försök använda true eller false som följande, vilket kommer att förenkla koden och köra snabbare

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

Relaterade artiklar