Angular中如何为API返回的已有对象新增自定义键值属性？

可行解决方案 #

1. 优先使用对象展开运算符赋值（最稳妥）

你之前的写法是先把响应赋值给branchProduct再追加属性，可能因为API返回的响应对象被标记为不可扩展、或者存在引用冻结问题导致属性追加失败，直接在赋值时合并属性即可：

getProductByName() {
  const productName = this.addProductForm.get('product')?.value;
  // 提前做类型转换+空值兜底，符合接口number类型要求
  const quantity = Number(this.addProductForm.get('quantity')?.value) ?? 0;

  this.branchService.getProductByName(productName).subscribe((resp: Partial<BranchProduct>) => {
    // 新建对象合并响应属性和手动加的QuantityOnHand，不会受原响应对象的限制
    this.branchProduct = {
      ...resp,
      QuantityOnHand: quantity
    };
    console.log(this.branchProduct);
  })
}

2. 检查两个常见异常点

• 确认表单获取的quantity值正常：可以在subscribe内部先打印quantity的值，排除表单控件取值为空、或者取值为字符串类型的问题
• 确认API返回的响应字段大小写匹配：如果接口返回的字段是小驼峰quantityOnHand，和你定义的大驼峰QuantityOnHand不一致，也会出现属性覆盖/新增失败的问题

3. 备选方案：用Object.assign合并属性

如果你的运行环境不支持对象展开运算符，也可以用Object.assign实现相同效果：

this.branchProduct = Object.assign({}, resp, { QuantityOnHand: quantity });

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