Angular12配合JSON-server新增数据后需刷新才能删除更新问题

问题根源 #

新增产品时，你直接将前端构造的未携带有效id的Product实例推入本地列表，而JSON-server执行POST新增请求后，会自动生成唯一id并在响应中返回完整的产品数据。本地列表中的新增条目缺少服务端生成的有效id，导致后续调用删除、更新接口时传递的id参数无效，请求失败。刷新页面后会重新从服务端拉取全量带正确id的产品数据，所以操作恢复正常。

修复方案 #

1. 调整ProductService的addProduct方法声明 #

明确指定POST请求的返回类型为Product，确保可以拿到服务端返回的带id的完整产品对象：

// product.service.ts
addProduct(product: Product) {
  return this.http.post<Product>(this.url, product);
}

2. 修改新增产品的回调逻辑 #

不再直接推入前端构造的product实例，改用服务端返回的savedProduct加入本地列表：

// main-product.component.ts saveProduct方法的新增分支
//add a new product
this.productService.addProduct(product).subscribe(
  (savedProduct) => this.listProduct.push(savedProduct),
  () => console.log('error')
);

可选优化：增加删除操作的索引合法性判断 #

避免特殊场景下索引不合法导致的列表操作异常：

// main-product.component.ts deleteProduct方法
deleteProduct(p: Product) {
  let i = this.listProduct.indexOf(p);
  if (i > -1) {
    this.productService
      .deleteProduct(p.id)
      .subscribe(() => this.listProduct.splice(i, 1));
  }
}

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