Angular中如何为GET请求返回的对象数组元素属性赋值

问题根因 #

1. 浏览器控制台惰性求值
   你单独打印sentinels[0].cameraStatus时是立即读取当前值，此时你刚完成赋值所以输出true。但打印整个sentinels[0]对象时，控制台存储的是对象的引用，只有你手动点开查看属性时才会读取该对象的最新属性值，大概率是后续代码修改/删除了该属性，或者对象被其他逻辑替换，才会出现点开后属性为undefined的情况。
   你可以用console.log(JSON.stringify(sentinels[0]))打印对象快照，验证赋值操作是否真的生效。

2. HttpClient的类型声明仅作用于编译期
   你代码中this.http.get<Sentinel[]>只是TypeScript的类型断言，运行时并不会自动把接口返回的普通JSON对象转换成Sentinel类实例。如果你的Sentinel是类、cameraStatus是类中定义的属性，接口返回的原始对象本身是没有这个属性的，如果你后续有逻辑对对象结构做校验、序列化操作，很可能会把额外添加的cameraStatus属性丢失。

修复方案 #

1. 不要直接修改HTTP响应的原始对象，每次修改生成新的对象数组，避免原始对象被其他逻辑影响：

setCameraStatusToTrue(sentinels: Sentinel[]): Sentinel[] {
  return sentinels.map(sentinel => ({
    ...sentinel,
    cameraStatus: true
  }));
}

2. 优化请求逻辑避免内存泄漏：你当前在方法内部直接订阅Observable没有处理退订逻辑，容易产生内存泄漏，改用tap操作符处理副作用，把订阅权交给调用方：

getSentinels(previousUrl?: string): Observable<Sentinel[]> {
  return this.http.get<Sentinel[]>(`${baseUrl}/sentinels`).pipe(
    tap(sentinels => {
      if (previousUrl && sentinels?.length) {
        this.sentinels = this.setCameraStatusToTrue(sentinels);
      } else {
        this.sentinels = sentinels;
      }
    })
  );
}

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