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

Published

I’m working on an Angular 12 project, and I’m storing the data using JSON-server.
The CRUD operations are working fine.

But when I add a new item, using the form, the delete and update buttons won’t work, unless I refresh the page.

This the error I get in the console , after I click on the delete button, (without refreshing).

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);
  }
}

main-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;
 }

form-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);
  }
}

Source: Angular Questions

Answers

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq