Angular中*ngIf else块不渲染问题：根据starred属性切换按钮异常

我一眼就看到问题所在了——你把*ngIf直接加在了<li>标签上，这就导致当property.starred为false时，整个<li>元素都会被Angular移除，里面的ng-template #elseBlock自然也跟着消失了，根本没机会渲染出来！

修复方案：用ng-container承载条件判断 #

ng-container是Angular提供的“隐形容器”，它不会生成额外的DOM元素，但可以用来包裹*ngIf逻辑，这样<li>始终存在，只是切换内部的按钮内容：

<li class="list-inline-item">
  <ng-container *ngIf="property.starred === true; else elseBlock">
    <button class="btn btn-primary" (click)="sendLike(property.id)">
      <i class="fa fa-heart"></i>
    </button>
  </ng-container>
  <ng-template #elseBlock>
    <button>Test</button>
  </ng-template>
</li>

额外排查点：确认starred的类型是否正确 #

虽然你说判断逻辑正常，但还是可以检查一下property.starred的实际类型——比如会不会是字符串类型的"true"/"false"？如果是这样，=== true的严格相等判断就会失效。可以改成宽松相等或者转换为布尔值：

• 用宽松相等：*ngIf="property.starred == true"
• 强制转换为布尔值：*ngIf="!!property.starred" 或者 *ngIf="Boolean(property.starred)"

这样调整后，当starred为false时，else块的按钮就能正常显示啦！

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