在 ngIf else 模板中调用（单击）函数时出错答案

【问题标题】：Error calling (click) function inside ngIf else template在 ngIf else 模板中调用（单击）函数时出错
【发布时间】：2021-09-10 21:16:46
【问题描述】：

我有一个 *ngIf 和一个 else 模板定义如下：

<button type="button" *ngIf="!paused; else resume" (click)="pause()">
    pause
</button>

<ng-template #resume>
    <button type="button" (click)="resume()">
        resume  
    </button>
</ng-template>


class AppComponent  {
    paused = false;
    pause() {
        this.paused = true;
    }
    resume = () => {
        this.paused = false;
    }
}

暂停按钮有效，但单击恢复按钮将记录控制台错误：

错误：jit_nodeValue_4(...) 不是函数

Here is a runnable demo of the issue。单击“恢复”按钮并检查控制台是否有错误。

【问题讨论】：

标签： angular angular-ivy

【解决方案1】：

内联模板名称resume与方法名称resume冲突。模板基本上覆盖了方法，因此出现错误。

如果您更改模板名称，它将起作用：

<button type="button" *ngIf="!paused; else resumeTpl" (click)="pause()">
  pause
</button>

<ng-template #resumeTpl>
  <button type="button" (click)="resume()">
    resume  
  </button>
</ng-template>

【讨论】：