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块时，它停止来回切换。更改内容如下：

    <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的存在是阻止问题的原因。

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的动作。

希望有帮助！

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应该告诉您“成员noHeader不可调用”。

* ngIf在else块中没有切换回false

2 个答案: