*ngIf 不会在 else 块中切换回 false

Question

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

我只是在玩弄 ngIf，这没有任何用处。我使用两个按钮在显示和隐藏 header 之间来回切换。虽然它只是一个 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 按钮时显示 header，单击 noHeader 按钮时再次隐藏它。

但是，当我添加 ngIf Else 块时，它停止来回切换。更改如下：

    <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!，如果我单击是，则切换到header。但是如果我在那之后单击否按钮，它不会切换回隐藏 header。

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

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

Answer 1

问题是 noHeader 存在名称冲突。它在您的示例中用作组件 class 上的方法以及 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 的动作。

Answer 2

您的模板与函数的调用相同：noHeader。

您有名称冲突问题，您无法调用 noHeader 函数，Angular 认为您正在引用 noHeader 模板引用。

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

或

hideHeader() {
  this.displayHeader = false;
}

一个正确的IDE应该告诉你"Member noHeader is not callable"。

*ngIf 不会在 else 块中切换回 false

*ngIf does not toggle back to false in else block

javascript

angular-ng-if

angular