*ngIf搭配mat-spinner延迟异常：数据加载完成后Spinner长时间不消失

核心原因 #

你遇到的问题本质是大表格渲染阻塞主线程，导致loading状态更新（进而隐藏spinner）被延迟：

• HTTP请求8秒完成后，你把大量数据赋值给MatTableDataSource，同时设置loading=false。
• 但*ngIf="loading===false"会触发整个表格容器的创建和渲染，3MB的JSON转成数组后可能包含上万条数据，一次性渲染这么多表格行要消耗大量主线程资源，浏览器无法及时处理spinner的隐藏操作，得等表格渲染完成才会更新视图，所以总耗时被拉长到45秒。
• 移除*ngIf时，表格容器一开始就存在，Angular会在数据加载完成后逐步更新表格内容（而非一次性创建所有DOM节点），主线程不会被长时间阻塞，页面就能正常加载完成。

解决办法 #

1. 启用MatTable虚拟滚动
   这是最有效的方案，只渲染当前可见区域的表格行，大幅减少DOM节点数量：

<!-- 在表格外层添加虚拟滚动容器 -->
<cdk-virtual-scroll-viewport itemSize="50" class="table-container">
  <table mat-table [dataSource]="tableDataSource">
    <!-- 表格列定义 -->
  </table>
</cdk-virtual-scroll-viewport>

记得在模块中导入ScrollingModule。

2. 优化变更检测策略
   将包含表格的组件变更检测设为OnPush，避免不必要的全局变更检测：

import { ChangeDetectionStrategy, Component } from '@angular/core';

@Component({
  selector: 'app-your-table',
  templateUrl: './your-table.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush // 启用OnPush策略
})
export class YourTableComponent { /* ... */ }

3. 先隐藏spinner再渲染表格
   通过setTimeout把表格数据的赋值放到下一个宏任务，让浏览器先处理spinner的隐藏：

ngOnInit() {
  this.http.get('assets/abc.json').subscribe((res) => {
    // 先更新loading状态，让spinner立即隐藏
    this.loading = false;
    // 延迟处理表格数据，避免阻塞主线程
    setTimeout(() => {
      this.tableDataSource = new MatTableDataSource<randomInterface>(res as randomInterface[]);
    }, 0);
  })
}

4. 分页加载数据
   如果业务允许，把大文件拆分成多个小文件，或者前端做分页处理，只加载当前页的数据，减少单次渲染的压力。

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