Angular 8中ng-container的ngIf指令失效问题求助

嘿，我来帮你捋捋这个问题！既然你的completed变量在那个带spinner的div里能正常工作，但在ng-container和span上的*ngIf却失效，大概率是变更检测或者作用域的问题，咱们一步步来排查：

1. 先排查变更检测策略 #

如果你的组件用了ChangeDetectionStrategy.OnPush，那只有当输入属性变化或者组件内触发了异步操作（比如HttpClient请求、定时器）时，Angular才会自动更新视图。要是你是直接给completed赋值（比如this.completed = true;），但没有触发变更检测，就会导致视图不更新。

解决办法： #

• 用Observable+async管道（推荐）：
  把completed改成可观察对象，让Angular自动处理变更检测：

  // 组件.ts文件
  import { BehaviorSubject } from 'rxjs';
  
  completed$ = new BehaviorSubject<boolean>(false);
  
  // 当任务完成时更新状态
  markAsCompleted() {
    this.completed$.next(true);
  }
  

  模板中使用async管道订阅：

  <ng-container *ngIf="!(completed$ | async)">
    <span>Working.......</span><br />
  </ng-container>
  <ng-container *ngIf="completed$ | async">
    <span>Working Complete</span><br />
  </ng-container>
  

• 手动触发变更检测：
  先在组件中注入ChangeDetectorRef，赋值后手动通知Angular更新视图：

  import { ChangeDetectorRef } from '@angular/core';
  
  constructor(private cdr: ChangeDetectorRef) {}
  
  // 赋值后触发检测
  markAsCompleted() {
    this.completed = true;
    this.cdr.detectChanges();
  }
  

2. 检查变量作用域是否一致 #

看看你的ng-container是不是放在某个ng-template、ngFor或者其他结构指令内部？比如如果是在*ngFor="let item of items"块里，completed可能被误当成了循环项的属性，而非组件级变量。

快速验证方法：在ng-container附近插入{{completed}}，看看显示的是不是你预期的布尔值，这样能立刻确认变量在当前上下文是否可用。

3. 简化*ngIf语法（非核心，但可尝试） #

Angular的*ngIf支持直接使用逻辑表达式，把completed==false改成!completed，completed==true改成completed，虽然这不应该导致功能失效，但有时候简化语法能规避一些隐性的语法问题：

<ng-container *ngIf="!completed">
  <span>Working.......</span><br />
</ng-container>
<ng-container *ngIf="completed">
  <span>Working Complete</span><br />
</ng-container>

你可以先试试在模板里插个{{completed}}确认变量值，再按照上面的方法排查变更检测，应该就能解决问题啦！

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