Angular，新添加的item刷新后只能删除

Question

我正在处理一个 Angular 12 项目，我正在使用 JSON-server 存储数据。 CRUD 操作运行良好。

但是当我使用表单添加新项目时，删除和更新按钮将不起作用，除非我刷新页面。

This the error I get in the console，我点击删除按钮后，（没有刷新）。

product.service.ts

  url = environment.url + 'products/';
  constructor(private http: HttpClient) {}

  getListProduct() {
    return this.http.get<Product[]>(this.url);
  }

  addProduct(product: Product) {
    return this.http.post(this.url, product);
  }

  deleteProduct(id: string) {
    return this.http.delete(this.url + id);
  }
  updateProduct(product: Product) {
    return this.http.put(this.url + product.id, product);
  }
}

主要-product.component.ts

export class MainProductComponent implements OnInit {
 inputProduct: Product = new Product();
 isForm: Boolean = false;
 buttonString: String = 'Add New Product';
 listProduct: Product[] = [];

 constructor(private productService: ProductService) {}

 ngOnInit(): void {
   this.productService
     .getListProduct()
     .subscribe((data: Product[]) => (this.listProduct = data));
 }
 changePage() {
   this.isForm = !this.isForm;
   if (this.isForm) {
     this.buttonString = 'Go Back To List';
   } else {
     this.inputProduct = new Product();
     this.buttonString = 'Add New Product';
   }
 }
 deleteProduct(p: Product) {
   let i = this.listProduct.indexOf(p);
   this.productService
     .deleteProduct(p.id)
     .subscribe(() => this.listProduct.splice(i, 1));
 }
 saveProduct(product: Product) {
   let i = this.listProduct.indexOf(product);
   if (i != -1) {
     //update a product
     this.productService
       .updateProduct(product)
       .subscribe(() => (this.listProduct[i] = product));
   } else {
     //add a new product
     this.productService.addProduct(product).subscribe(
       () => this.listProduct.push(product),
       () => console.log('error')
     );
   }
   this.isForm = false;
   this.buttonString = 'Add New Product';
   this.inputProduct = new Product();
 }

 updateProduct(p: Product) {
   this.isForm = true;
   this.inputProduct = p;
 }

表格-product.component.ts

export class FormProductComponent implements OnInit {
  selectedFile = null;
  private product!: Product;
  productForm!: FormGroup;
  @Input() updateProduct!: Product;
  @Output() addEvent = new EventEmitter<Product>();
  constructor(private builder: FormBuilder) {}

  ngOnInit(): void {
    if (this.updateProduct === null) {
      this.product = new Product();
    } else {
      this.product = this.updateProduct;
    }

    this.productForm = this.builder.group({
      title: [
        this.product.libelle,
        [Validators.required, Validators.minLength(3)],
      ],
      price: [
        this.product.prixUnitaire,
        [Validators.required, Validators.min(10)],
      ],
      photo: [this.product.photo, Validators.required],
      category: [this.product.categorie, Validators.required],
    });
  }
  upload(event: any) {
    this.selectedFile = event.target.files[0].name;
    console.log(this.selectedFile);
  }
  addProduct() {
    this.product.libelle = this.productForm.value.title;
    this.product.prixUnitaire = this.productForm.value.price;
    this.product.photo = String(this.selectedFile);
    this.product.categorie = this.productForm.value.category;

    this.addEvent.emit(this.product);
  }
}

Answer 1

这有点难说，但看起来你没有在前端的数组中保存来自创建的响应。

最有可能的代码应该如下

// add a new product
     this.productService.addProduct(product).subscribe(
       newProduct => this.listProduct.push(newProduct),
       () => console.log('error')
     );

我把上面的内容写在我的 phone 上，这里有一个更详细的答案。

我以前从未使用过 json-server，所以我对此一无所知。从他们的文档中，在他们的示例中，他们在将对象发送到 json 服务器之前在对象上创建 id。我看不到你的产品 class 所以我不知道你是否正在为你的对象生成一个 ID...我猜不是。

这种情况最常见的工作流程是，前端会创建一个没有 id 的对象，将其发送到后端，后端会将其保存在某种数据存储中。该过程还为该对象生成 id，并且 returns 它作为 create 调用中对象的一部分。然后，前端能够通过 id（get、put、delete 等）对该对象执行进一步的操作。

在您的代码中，您没有获取后端返回的对象并将其推送到数组中，而是将要发送到后端的对象推送到数组中。同样，在没有 id 的典型场景中。

如果 json-server 要求您创建和分配 ID，那么您需要更新您的产品 class 以便在产品更新时分配 ID。

你必须从数组中获取产品的逻辑是有效的，因为你得到的错误不是它找不到 'id of undefined'，而是代码正在寻找产品，但 id 属性该产品对象未定义。

同样，通常该 id 来自后端，如果发生在此处，那么您将不会得到它，因为您没有将来自后端的对象添加到数组中。如果 json-server 要求您将 id 传递给它，那么您将需要更新您的前端代码以生成 id 然后一切都应该为您工作。

Answer 2

peinearydevelopment 是对的。您也可以在添加或删除后重新获取列表。 （如果你想运行一些计算和查询或设置一些服务器端排序到列表）

类似于：

constructor(private productService: ProductService) {}

 ngOnInit(): void {
   this.fetchList();                                                  // This Line
 }

 fetchList() {                                                        // This Function
   this.productService
     .getListProduct()
     .subscribe((data: Product[]) => (this.listProduct = data));
 }
 deleteProduct(p: Product) {
   let i = this.listProduct.indexOf(p);
   this.productService
     .deleteProduct(p.id)
     .subscribe(() => {
       this.fetchList();                                              // This Line
     });
 }
 saveProduct(product: Product) {
   let i = this.listProduct.indexOf(product);
   if (i != -1) {
     //update a product
     this.productService
       .updateProduct(product)
       .subscribe(() => (this.listProduct[i] = product));
   } else {
     //add a new product
     this.productService.addProduct(product).subscribe(() => {
       this.fetchList();                                              // This Line
     }, () => console.log('error'));
   }
   this.isForm = false;
   this.buttonString = 'Add New Product';
   this.inputProduct = new Product();
 }

Angular，新添加的item刷新后只能删除

Angular, the newly added item can only be deleted after refresh

angular

typescript

httpclient

angular12

json-server