I am currently developing a project in Angular 12 and utilizing JSON-server to store the data. The CRUD operations are functioning as expected.
However, I have encountered an issue where after adding a new item through the form, the delete and update buttons do not work unless I refresh the page.
Upon clicking the delete button without refreshing, this is the error displayed 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);
}
}
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);
}
}