Angular中*ngIf条件渲染加载闪空后页面空白如何解决

1. 指令使用错误：*ngIf是结构型指令，不能直接写在<ng-template>标签上。<ng-template>本身是Angular的虚拟模板，不会主动渲染到DOM中，*开头的结构型指令本质是把指令所在的宿主元素包裹进一个虚拟的ng-template里实现渲染控制，直接把*ngIf绑在ng-template上，会导致条件成立时模板没有渲染宿主，直接出现空白，这就是接口返回后页面空的核心原因。
2. 语法笔误：第二个ng-template的模板变量写错了，#emptyReports"末尾多了个多余的双引号，会导致Angular解析模板引用失败。
3. 状态逻辑缺失：代码里reports初始值是空数组，此时接口还在请求中，reports.length > 0判定为false，直接触发else分支展示empty，等接口返回后因为第一个指令使用错误，内容渲染不出来变成空白，就出现了先闪0.1秒empty再变空白的现象。

• 把承载*ngIf条件的标签换成<ng-container>（Angular提供的逻辑容器，不会生成额外的真实DOM节点，不会影响页面结构），不要直接用ng-template挂载*ngIf。
• 删掉#emptyReports末尾多余的双引号，修正模板引用语法。
• 新增加载状态区分「接口请求中」和「请求完成无数据」两种场景，从根源避免加载阶段误展示空文本的闪屏问题。

component.ts #

reports: any[] = [];
// 新增加载状态标记，初始为加载中
isLoading = true;

ngOnInit() {
  this.http.get<any>(`supplier/reports.json`)
  .subscribe({
    next: (data) => {
      this.reports = data.reports;
    },
    complete: () => {
      // 无论请求成功失败，结束后关闭加载状态
      this.isLoading = false;
    }
  });
}

模板代码 #

<!-- 加载中展示的内容，可以替换成骨架屏/加载动画 -->
<ng-container *ngIf="isLoading">
  加载中...
</ng-container>

<!-- 加载完成后走数据判断逻辑 -->
<ng-container *ngIf="!isLoading">
  <ng-container *ngIf="reports.length > 0; else emptyReports">
    {{ reports.length }}
  </ng-container>
  <ng-template #emptyReports>
    empty
  </ng-template>
</ng-container>

如果不需要做加载提示，只想解决闪屏和空白问题，可以用更简化的写法：

1. 把ts里reports初始值改为null，接口返回时兜底为空数组：

reports: any[] | null = null;

ngOnInit() {
  this.http.get<any>(`supplier/reports.json`)
  .subscribe(data => this.reports = data.reports || []);
}

2. 模板修正指令使用和语法错误即可：

<ng-container *ngIf="reports">
  <ng-container *ngIf="reports.length > 0; else emptyReports">
    {{ reports.length }}
  </ng-container>
  <ng-template #emptyReports>
    empty
  </ng-template>
</ng-container>

这种写法下，初始reports为null，外层*ngIf不成立不会渲染任何内容，等接口返回reports被赋值为数组后，才会进入内层判断长度，也不会出现闪empty的问题，只是加载阶段没有提示而已。

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