Angular升级至21.2.15/v22后macOS模板Items无法渲染问题

1. 手动触发变更检测 #

subscribe回调如果运行在Angular变更检测上下文之外，可能导致框架无法感知products的更新。可以在赋值后手动触发变更检测：

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdr: ChangeDetectorRef) {}

// 在接口请求的subscribe回调中
this.productService.getProducts().subscribe(products => {
  this.products = products;
  this.cdr.detectChanges(); // 强制触发变更检测
});

更推荐改用async管道，让Angular自动管理变更检测和订阅生命周期：

// 组件类中定义可观察对象
products$: Observable<Product[]>;

ngOnInit(): void {
  this.products$ = this.productService.getProducts();
}

模板中直接使用管道：

@for(product of products$ | async; track product.id_product) {
  <!-- 你的产品模板内容 -->
}

2. 检查@for的track表达式 #

升级后Angular对track表达式的校验可能更严格，确认product.id_product是稳定且唯一的标识：

• 临时替换为track $index测试是否能渲染：

  @for(product of products; track $index) {
    <!-- 模板内容 -->
  }
  

• 如果替换后正常，说明原id_product存在问题，比如部分数据缺失该字段、类型不匹配（如接口返回字符串但组件中定义为数字），需要排查接口返回数据的一致性。

3. 清理本地开发环境缓存 #

升级版本后本地缓存可能残留旧代码，执行以下命令彻底清理：

rm -rf node_modules
rm package-lock.json
npm cache clean --force
npm install
ng cache clean
ng build --clean

4. 验证Node.js版本兼容性 #

虽然生产环境正常，但本地macOS下Node.js 24.x与Angular 22可能存在兼容性问题，尝试降级到Node.js 20.x LTS版本（Angular官方推荐的长期支持版本）再测试。

5. 检查模板语法合规性 #

确认@for语法完全符合Angular 22的规范，比如没有遗漏分号、括号，变量名拼写无误。升级后的模板解析器可能对语法错误更敏感，细微的语法问题可能导致渲染失败。

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