Angular ngIF 不在組件內部工作

Question

我有一個名為 header 的組件，但在其中我的 ngIf 不起作用，我不知道為什么...

header.ts

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

標題.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>

其他組件.ts

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

Answer 1

為什么你使用 isPage 作為字符串？ 最好使用布爾值

然后你的代碼改為

@Input() isPage: Boolean;

和

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

和

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

Answer 2

您應該使isPage布爾值並像這樣傳遞輸入

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

我創建了一個StackBlitz示例

Answer 3

在你的另一個組件中，你應該將isPage的值isPage一個變量，像這樣 `const isPage = "yes";

然后做這個

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

Answer 4

對於遇到此問題的任何其他人，上面的 CommonModule 解決方案不適用於他們。

我遇到了同樣的問題，因為我創建了一個新組件，其中嵌入了*ngIf ，它運行了由ngOnChanges()方法內部的邏輯派生的內部類變量。 我所做的任何事情都不允許 ngIf 運行而不呈現組件。

修復它的是我不得不終止我的ng serve並重新啟動我的 angular 開發服務器。 一旦我這樣做了*ngIf開始正確渲染。

¯_(ツ)_/¯