Angular ngIF在组件内部不起作用

Question

我有一个称为标头的组件，但在其中我的ngIf无法正常工作，我也不知道为什么...

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

您应该将isPage设置为布尔值，并像这样传递输入信息

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

我创建了一个StackBlitz示例

Answer 2

[在使用@input时将数据传递到内部组件时，总是尝试提供[]。

尝试此

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

和ts

 @Input('isPage') isPage: string;

Answer 3

为什么使用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>