Angular报错TypeError：无法读取undefined的'State'属性求助

开发者阿泽

2026-8-11

Angular路由开发中API数据获取错误排查

错误信息

users.component.ts:15 ERROR TypeError: Cannot read properties of undefined (reading 'State')
    at Object.next (users.component.ts:17:40)
    at ConsumerObserver.next (Subscriber.js:91:33)
    at SafeSubscriber._next (Subscriber.js:60:26)
    at SafeSubscriber.next (Subscriber.js:31:18)
    at map.js:7:24
    at OperatorSubscriber._next (OperatorSubscriber.js:13:21)
    at OperatorSubscriber.next (Subscriber.js:31:18)
    at filter.js:6:128
    at OperatorSubscriber._next (OperatorSubscriber.js:13:21)
    at OperatorSubscriber.next (Subscriber.js:31:18)

问题代码

ngOnInit(): void {
    //Fetch Users
    this.userService.getAllUsers()
    .subscribe(
      (successResponse)=>{
        console.log(successResponse[0].State);
      },
    (errorResponse)=>{
      console.log(errorResponse);
    }

    )

  }

排查与解决

错误核心是successResponse[0]为undefined，说明你误将API响应当成数组直接访问，但实际响应是包含data数组的外层对象。

解决步骤：

先打印完整响应结构，确认数据层级：
```
console.log(successResponse);
```
根据实际结构调整访问路径，比如响应格式为{ data: [/* 用户数组 */] }，则修改代码：
```
console.log(successResponse.data[0].State);
```
为避免后续空指针异常，建议添加可选链操作符做安全访问：
```
console.log(successResponse?.data?.[0]?.State);
```