Angular ngIF 不在组件内部工作

Question

i have a component called header but inside it my ngIf does not working and i have no idea why...

header.ts

  @Input() title: string;
  @Input() subTitle: string;
  @Input() isPage: string;

header.html

<header>

  <div>
   //this *ngif does not work, if its 'yes' it hide the element and if i set to 'no' still hide
    <ion-buttons *ngIf="isPage === 'yes' " slot="start" (click)="goBack()" style="margin-left: 0.5em;">
      <ion-button>
        <ion-icon name="chevron-back-outline"></ion-icon>
      </ion-button>
    </ion-buttons>

  </div>

  <div>
    // this work
    <h2>{{title}}</h2>
    <h1>{{subTitle}}</h1>
  </div>

</header>

otherComponent.ts

<ion-content>
  <app-header title="lorum" subTitle="ipsum" isPage="yes" ></app-header>
</ion-content>

Answer 1

Why you use isPage as string? it's better to use boolean

Then you code changed to

@Input() isPage: Boolean;

And

<ion-buttons *ngIf="isPage" slot="start" (click)="goBack()" style="margin-left: 0.5em;">

And

<app-header [title]="lorum" [subTitle]="ipsum" [isPage]="true" ></app-header>

Answer 2

You should make isPage boolean and pass the input like this

<app-header [isPage]="true"></app-header>

I created a StackBlitz example

Answer 3

In your other component, you should assign the value of isPage to a variable, like this `const isPage = "yes";

Then do this

<app-header [title]="App" [subTitle]="header" [isPage]=isPage></app-header>

Answer 4

For anyone else who is having issues with this and the CommonModule solution above didn't apply to them.

I had the same issue because I created a new component with an embedded *ngIf inside of it running off of an internal class variable derived by logic inside of an ngOnChanges() method. Nothing I did would allow the ngIf to function to not render the component.

What fixed it was I had to kill my ng serve and restart my angular dev server. Once I did that the *ngIf started rendering correctly.

¯_(ツ)_/¯