Angular TypeError问题：读取roles数组触发forEach未定义错误

错误原因 #

你遇到的错误是因为this.data.roles为undefined，导致无法调用forEach方法，主要有两个诱因：

1. 数据对象格式错误：提供的JSON数据存在语法问题，allowedOffices是数组类型，但内部直接放置了键值对"lastName": "LNU"，不符合JSON语法规范，这会导致数据无法被正确解析，最终this.data或this.data.roles无法正常获取。
2. 代码未做空值校验：直接调用this.data.roles.forEach，没有提前判断this.data和this.data.roles是否存在、是否为数组，一旦其中任意一项为undefined，就会触发报错。

修复步骤 #

1. 修正数据对象的JSON格式 #

将错误的JSON结构调整为合法格式，比如把allowedOffices改为空数组，同时把lastName移到外层：

{
    "userID": "abcd",
    "firstName": "FNU",
    "lastName": "LNU",
    "allowedOffices": [],
    "roles": [ 
        {
            "id":"ABC",
            "name": "Read"
        },
        {
            "id":"XYZ",
            "name": "Write"
        }
    ]
}

2. 修改代码添加空值校验 #

提供几种可行的代码修改方案，任选其一即可：

方案一：使用可选链运算符（ES2020+）

通过可选链?.自动处理undefined的情况，只有当this.data和this.data.roles都存在时才执行forEach：

this.data?.roles?.forEach(role => {
  this.roleIds.push(role.id);
});

方案二：显式条件判断

兼容性更好，适合不支持可选链的环境：

if (this.data && Array.isArray(this.data.roles)) {
  this.data.roles.forEach(role => {
    this.roleIds.push(role.id);
  });
}

方案三：使用map+concat简化逻辑

更简洁地将roles中的id合并到roleIds数组：

this.roleIds = this.roleIds.concat(
  (this.data?.roles || []).map(role => role.id)
);

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