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

【问题标题】：*ngIf does not toggle back to false in else block*ngIf 不会在 else 块中切换回 false
【发布时间】：2019-04-18 14:43:26
【问题描述】：

我正在使用 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 块时，它停止来回切换。变化如下：

    <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 块，但从 ngIf 语句中取出 else noHeader，它仍然不会切换回来。因此，似乎 ng-template 的存在正在阻止事情的发展。

【问题讨论】：

标签： javascript angular angular-ng-if

【解决方案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 正在使用中。

【讨论】：

在我的 q 年龄足够大之前无法进行检查。

【解决方案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”。

【讨论】：