Angular调用API取数后读取timestamp报Cannot read properties of undefined错误

问题根因汇总 #

1. 构造函数初始化dataResults的遍历方式错误 #

你使用for...in遍历数组dataArray，for...in遍历数组时返回的是数组索引字符串（"0"、"1"、"2"），而非你期望的import、cron、delta这类业务类型值。这就导致初始化后dataResults的键是"0"、"1"、"2"，你需要的import、cron等业务键在初始状态下根本不存在，值为undefined。

2. 未初始化的export键直接触发报错 #

你在dataArray中注释掉了export项，所以既没有初始化dataResults['export']，也不会发起对应的API请求给它赋值，但模板中仍然使用了exportTimestamp，对应的getter访问this.dataResults['export']时拿到的是undefined，再读取timestamp属性就会抛出类型错误。

3. 异步请求时序问题 #

API请求是异步的，在所有请求返回前模板就会执行首次渲染，此时除了先返回的delta外，import、cron对应的键还未被赋值，也会触发临时的undefined错误。

修复方案 #

1. 修正初始化遍历逻辑 #

把构造函数中的for...in改为for...of遍历，拿到正确的业务类型作为键：

// 修正前错误写法
// for (var val in this.dataArray) {
//   this.dataResults[val] = {} as StatusElementInterface;
// }

// 修正后写法
for (const val of this.dataArray) {
  this.dataResults[val] = {} as StatusElementInterface;
}

2. 处理export字段 #

要么在dataArray中恢复export项，要么在模板中删掉exportTimestamp相关的渲染逻辑，也可以用可选链简化getter的空值判断，避免报错：

get exportTimestamp():number|undefined{
  return this.dataResults['export']?.timestamp ? Number(this.dataResults['export'].timestamp) * 1000 : undefined;
}

3. 修正类型定义与返回值转换 #

你当前接口返回的是单个StatusElementInterface类型的对象，不是StatusInterface类型的键值对集合，同时返回的timestamp是字符串类型，和你定义的number类型不匹配，建议调整请求逻辑：

this._httpClient.get<StatusElementInterface>(requestUrl)
  .pipe(
    map(data => {
      // 字符串时间戳转数字，匹配接口定义
      if(data.timestamp) data.timestamp = Number(data.timestamp)
      return data
    })
  )
  .subscribe(data => {
    this.dataResults[val] = data;
  })

内容的提问来源于stack exchange，提问作者Henning Möllendorf