Angular特定页面detectChanges()失效问题求助

控制台能正常打印SWAPI接口返回的数据，但页面无任何结果展示。复制组件创建副本后可正常运行，将副本代码替换原组件后，原页面仍存在问题。

组件代码 #

export class ListUsersComponent implements OnInit {
  subscriptions: Subscription[] = [];
  avatarPic = 'none';
  tempData: any[] = [];
  
  constructor(private fb: FormBuilder,
    private http: HttpClient,
    private ref: ChangeDetectorRef) {
  }

  ngOnInit(): void {
    this.loadUser();
  }

  loadUser() {
    const sub = this.http.get('https://swapi.dev/api/people').subscribe((result:any)=> {
      console.log(result); //data is showing here
      console.log(result.results); //data is showing here
      this.tempData = result.results;
      this.ref.detectChanges();
    });
    this.subscriptions.push(sub);
  }
}

模板代码 #

<table class="table">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">Name</th>
            <th scope="col">Height</th>
            <th scope="col">Mass</th>
        </tr>
    </thead>
    <tbody>
        {{avatarPic}}
        <tr *ngFor="let data of tempData; let i = index">
            <th scope="row">{{ i + 1 }}</th>
            <td>{{data.name}}</td>
            <td>{{data.height}}</td>
            <td>{{data.mass}}</td>
        </tr>
    </tbody>
</table>

排查方向与解决方案 #

• 调整变更检测触发方式
  若组件使用了ChangeDetectionStrategy.OnPush，detectChanges()可能无法触发父组件的变更检测，替换为markForCheck()标记组件树待检测：

  this.tempData = result.results;
  this.ref.markForCheck();
  

  也可通过异步延迟触发，确保变更在Angular的变更检测周期外完成：

  setTimeout(() => {
    this.ref.detectChanges();
  }, 0);
  

• 检查组件元数据与模块声明
  核对原组件的@Component装饰器，确认templateUrl路径正确，无拼写错误；同时检查模块中的组件声明，确保原组件未重复声明或遗漏声明——副本正常运行说明代码逻辑无错，大概率是原组件的元数据存在隐性配置问题。

• 清理缓存与重建项目
  执行ng clean清理Angular编译缓存，再重启开发服务器，避免旧缓存导致组件未更新。

• 强制数组引用变更
  通过数组拷贝强制触发变更检测（即使当前是直接赋值新数组，此操作可排除隐性的引用复用问题）：

  this.tempData = [...result.results];
  

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