时间戳

首页 > 解决方案 > *ngIf 不会在 else 块中切换回 false

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

问题描述

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

标签： javascriptangularangular-ng-if

解决方案

问题是存在名称冲突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>

这是一个实际的例子。

推荐阅读