Angular中更新Observable对象数组报错：无法赋值给只读属性如何解决？

错误原因 #

你直接修改了数组中原有的User对象属性，但该对象是只读/不可变的（常见于HTTP响应对象、状态管理库的不可变数据，或者代码中被冻结的对象），JavaScript不允许修改只读属性，因此抛出错误。

解决方案：创建新对象替代修改原对象 #

在map操作中，不要直接修改原user对象，而是返回一个新的对象。对于需要更新的用户，用对象展开运算符（...）复制原有属性，再覆盖要修改的字段；其他用户直接返回原对象即可。

修改后的代码如下：

this.allUsers.update(val => val.pipe(
  map(users => users.map((user: User) => {
    if (user.id === "65c2a622878dcef34ed569ad") {
      // 返回新对象，不修改原对象
      return {
        ...user,
        name: "new Name",
        lastname: "new Lastname",
        address: "new Address",
        password: "new Password"
      };
    }
    return user; // 未匹配的用户直接返回原对象
  }))
));

额外说明 #

• 这种方式遵循不可变数据模式，在Angular（尤其是配合RxJS、NgRx等库）里很重要，能避免意外副作用，同时保证变更检测正常工作。
• 如果User对象嵌套了其他子对象（比如address是复杂对象），需要深层复制时可以用structuredClone()，但仅顶层属性更新的话，对象展开运算符就足够用。

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