Angular对象赋值后数组最后元素丢失的异常问题排查

问题现象 #

将常量中的对象赋值给父组件属性，传递给子组件后，对象内的foo数组最后一个元素消失：

• 父组件中直接打印this.configuration.foo显示10个元素，用扩展运算符创建新数组打印则显示完整11个元素
• 子组件接收后打印数组同样丢失最后一个元素
• 临时在foo数组末尾添加空对象{}可缓解问题

可能的原因分析 #

1. 对象引用共享导致的隐性数组修改 #

CONFIG是全局常量，直接赋值给父组件的configuration属性后，父子组件共享同一个对象引用。如果代码中某个环节（比如模板渲染逻辑、第三方指令/管道、异步操作）对数组执行了pop()、splice()等修改操作，会直接影响原数组。而扩展运算符[...this.configuration.foo]创建了数组的副本，保留了初始的完整状态，因此能显示全部元素。

2. 控制台打印的延迟求值特性 #

浏览器控制台打印对象时采用延迟求值：直接打印数组时，控制台只会显示数组的引用，当你手动展开时才会读取当前的数组状态。如果在打印后、展开前数组被修改，就会看到“丢失元素”的假象。用console.log(JSON.stringify(this.configuration.foo))打印数组的JSON快照，能看到打印时刻的真实长度和内容。

3. 模板或管道的隐性过滤/截断 #

子组件模板中如果使用*ngFor遍历数组，或通过自定义管道处理数组，可能存在逻辑错误导致最后一个元素被过滤：

• 比如*ngFor中错误的条件判断（如*ngFor="let item of configuration.foo; if item.title !== '10'"）
• 自定义管道在处理数组时，返回结果意外截断了最后一个元素

4. 类型定义不匹配的隐性影响 #

如果ConfModel中对foo数组的类型定义存在限制（比如错误地限定了数组长度、或元素类型不兼容），虽然TypeScript不直接影响运行时，但可能导致Angular在处理输入绑定时出现隐性的类型转换或截断。

5. 常量定义的语法隐患 #

注意到你提供的constants.ts代码中，数组元素之间没有逗号分隔（如{title:"0",...}后直接跟{title:"1",...}），这属于语法错误。如果实际代码存在该问题，JavaScript引擎解析时可能产生异常，导致数组长度不符合预期。

验证与解决建议 #

• 冻结常量对象：在constants.ts中冻结CONFIG，阻止意外修改：

  export const CONFIG = Object.freeze({
    foo: [/* 元素列表 */]
  });
  

  若冻结后出现报错，说明存在修改数组的代码，可据此定位问题位置。
• 传递数组副本：父组件中创建常量对象的深拷贝，避免引用共享：

  configuration = JSON.parse(JSON.stringify(CONFIG));
  // 或使用结构化克隆、lodash.cloneDeep等方式
  

• 检查模板逻辑：排查子组件的*ngFor、管道、自定义指令，确认是否存在过滤或修改数组的逻辑。
• 打印快照验证：用console.log(JSON.stringify(this.configuration.foo))代替直接打印数组，确认元素是否真的丢失。

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