Angular中*ngIf指令else分支失效问题求助

Hey there! I see the issue with your *ngIf else implementation—let's get that sorted out quickly.

The problem lies in how you've set up the elseBlock template reference variable. You added #elseBlock to the <p> tag inside <ng-template>, but Angular expects this reference to be directly on the <ng-template> itself so the *ngIf directive can locate the else template properly.

Here's the corrected HTML code: #

<div> 
  <button (click)="onClick()">click</button> 
  <p *ngIf="change; else elseBlock"> change is true </p> 
  <ng-template #elseBlock> 
    <p>change is false</p> 
  </ng-template> 
</div>

What changed? #

• Moved the #elseBlock template reference from the inner <p> tag to the <ng-template> tag. This tells Angular exactly which template to use when the change condition is false.
• Fixed the typo "flase" to "false" in the else branch text (small detail but good to correct!)

Your component.ts code is totally fine—the change boolean toggle logic works correctly. Once you update the HTML, clicking the button will now properly switch between showing "change is true" and "change is false".

Just a quick recap of how *ngIf else works in Angular:

• The *ngIf="condition; else templateRef" syntax looks for a template reference variable matching templateRef that's attached to an <ng-template> element.
• The <ng-template> acts as a hidden template that only gets rendered when the else condition is triggered.

内容的提问来源于stack exchange，提问作者sagar k