Angular中OnInit初始化后目标对象仍为undefined问题排查

1. 数据源中ID重复且不唯一 #

你提供的myWalls数组里两个对象的id都设为1，这违反了“ID关联路由”的逻辑——每个路由对应的ID应该唯一。如果路由参数的id不是1，比如是2，计算索引2-1=1时，虽然能取到数组第二个元素，但它的ID并不匹配；如果路由参数id大于2，索引会超出数组长度，直接返回undefined。

2. 路由参数的类型未正确转换 #

ActivatedRoute.params返回的参数默认是字符串类型，如果直接执行params['id']-1，虽然JS会隐式转换，但如果参数不是合法数字格式（比如包含非数字字符），会得到NaN，用NaN作为数组索引必然返回undefined。建议显式转换为数字：

const id = Number(params['id']);
this.object = myWalls[id - 1];

3. 路由参数名称不匹配 #

检查你的路由配置，确保路径中定义的参数名确实是id。比如如果路由配置是：

{ path: 'wall/:wallId', component: FirstInComponent }

那么你应该用params['wallId']而不是params['id']，否则参数值会是undefined，后续计算索引自然出错。

4. 数组索引越界 #

如果路由参数的id值减去1后，超出了myWalls数组的有效索引范围（比如数组只有2个元素，索引为0和1，但id是3，计算后索引为2），数组访问会返回undefined。

5. 订阅回调未触发（路由参数未变化） #

如果组件是在路由参数不变的情况下初始化（比如直接刷新当前路由），可以改用route.snapshot.params直接获取初始参数，避免订阅延迟的问题：

ngOnInit(): void {
  const id = Number(this.route.snapshot.params['id']);
  this.object = myWalls[id - 1];
}

内容的提问来源于stack exchange，提问作者dog-pineapple