Angular循环打印元素显示旧值，列表更新未及时生效求助

问题复现 #

组件核心代码如下：

// 类属性定义
tenants: any[] = [];
@Input() onTenantListChange: EventEmitter<Tenant[]>;

ngOnInit(): void {
  this.onListChange.subscribe(data => {
    if (data !== undefined && Array.isArray(data)) {
      console.log("iniziale", data)
      this.tenants = [];
      for (let t of data) {
        console.log(" t ",t)
        this.tenants.push({
          title: t.name,
          value: t.id,
        });
      }
      console.log(this.tenants);
    }
  });
}

异常现象：

• 首行console.log("iniziale", data)显示更新后的列表，但循环内console.log(" t ",t)输出元素旧值，需触发两次事件才能捕获编辑操作
• Firefox控制台日志预览显示旧值，展开后可见正确新值
• 仅更新现有元素时出现问题，插入、删除操作正常
• 尝试for...of、forEach()、普通for循环，结果一致

核心原因分析 #

1. 控制台引用延迟求值：Firefox等浏览器的console.log对引用类型（对象/数组）采用延迟读取逻辑，预览显示的是日志触发时刻的快照，但展开时会读取最新引用值，造成“预览旧值、展开新值”的错觉。
2. 数组引用未更新：EventEmitter触发时若直接传递原数组引用，外部后续修改数组元素会同步影响订阅内的data，导致循环遍历到的是未完成更新的元素。
3. 变更检测策略影响：若组件启用ChangeDetectionStrategy.OnPush，未更新数组引用会导致Angular变更检测未触发，逻辑内的数据同步滞后。

排查与解决步骤 #

1. 验证控制台显示是否为假象 #

将循环内的日志改为序列化输出，获取触发时刻的真实值：

console.log(" t ", JSON.stringify(t));

若序列化后显示正确值，说明仅为浏览器控制台的延迟显示问题；若仍为旧值，继续排查数据引用问题。

2. 确保EventEmitter推送新数组引用 #

在触发onTenantListChange的代码处，创建新数组引用后再推送，隔离外部修改的影响：

// 错误示例：直接传递原数组
// this.onTenantListChange.emit(this.tenantList);

// 正确示例：浅拷贝数组生成新引用
const updatedTenants = [...this.tenantList];
this.onTenantListChange.emit(updatedTenants);

若数组元素为复杂对象，需使用深拷贝：

const updatedTenants = JSON.parse(JSON.stringify(this.tenantList));
this.onTenantListChange.emit(updatedTenants);

3. 订阅内先克隆数据再处理 #

在订阅回调内先对data做克隆，避免外部引用修改干扰：

this.onListChange.subscribe(data => {
  if (data !== undefined && Array.isArray(data)) {
    // 浅拷贝数组及元素，隔离外部引用
    const clonedData = [...data].map(item => ({...item}));
    console.log("iniziale", clonedData);
    this.tenants = [];
    for (let t of clonedData) {
      console.log(" t ", t);
      this.tenants.push({
        title: t.name,
        value: t.id,
      });
    }
    console.log(this.tenants);
  }
});

4. 检查组件变更检测策略 #

若组件使用ChangeDetectionStrategy.OnPush，需确保输入属性引用变化，或手动触发变更检测：

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

constructor(private cdr: ChangeDetectorRef) {}

this.onListChange.subscribe(data => {
  // ... 处理逻辑 ...
  this.cdr.markForCheck(); // 手动标记需检测变更
});

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