javascript - *ngIf 不会在 else block 中切换回 false

Question

我正在使用 Angular7、npm 6.4.1、节点 10.15.3。

我只是在玩弄 ngIf，这没有任何用处。我使用两个按钮在显示和隐藏标题之间来回切换。虽然它只是一个 ngIf 语句，但它可以很好地处理以下代码:

    <p>Do you want to see the last header?</p>
    <button (click)="yesHeader()">Yes please!</button>
    <button (click)="noHeader()">PLEASE G-D NO!</button>

    <h2 *ngIf="displayHeader" style="color:blue">Here it is in all its glory!</h2>

和

public displayHeader=false;

  yesHeader(){
    this.displayHeader=true
  }

  noHeader(){
    this.displayHeader=false
  }

效果很好，在单击 yesHeader 按钮时显示标题，在单击 noHeader 按钮时再次隐藏它。

但是，当我添加一个 ngIf Else block 时，它停止来回切换。更改如下:

    <p>Do you want to see the last header?</p>
    <button (click)="yesHeader()">Yes please!</button><button (click)="noHeader()">NO! NO!</button>

    <h2 *ngIf="displayHeader; else noHeader" style="color:blue">Here it is in all its glory!</h2>

    <ng-template #noHeader>
      <h5>You don't know what you're missing!</h5>
    </ng-template>

现在，它在开始时显示 You don't know what you're missing!，如果我单击是，它会切换到标题。但如果我在那之后单击否按钮，它不会切换回隐藏标题。

我做错了什么，我怎样才能让它切换回来？

作为添加的数据点，如果我离开 else block ，但从 ngIf 语句中取出 else noHeader，它仍然不会切换回来。所以看似 ng-template 的存在是阻止事情发生的原因。

Answer 1

问题是 noHeader 存在名称冲突。它在您的示例中用作组件类的方法以及 ng-template 的名称。尝试更改方法名称或模板名称:

<p>Do you want to see the last header?</p>
<button (click)="yesHeader()">Yes please!</button><button (click)="noHeader()">NO! NO!</button>

<h2 *ngIf="displayHeader; else noHeaderTemplate" style="color:blue">Here it is in all its glory!</h2>

<ng-template #noHeaderTemplate>
  <h5>You don't know what you're missing!</h5>
</ng-template>

这是一个 example在行动中。