I want to remove an item from the product list. In my code, it deletes the other items, not the specific one that i want to delete.. I already assigned which id to delete but it doesn't. I don't know why it deletes the others.. Please help. Thank you

Service

import { Injectable } from '@angular/core';
import { Product } from './Product';
import { PRODUCTLIST } from './ProductSupplier';

@Injectable({
providedIn: 'root'
})
export class ProductDatabaseService {
selectedProduct: Product | undefined;
productList:Product[]=[];

getProductList(): Product[] {
    return PRODUCTLIST;
}

deleteProduct(prodCode: number) {
    const product = PRODUCTLIST.splice(prodCode);
    return product;
}

addProductData(code: number, name: string, price: number, details: string) {
    let newProduct = new Product(code, name, price, details);
    PRODUCTLIST.push(newProduct);
}

getProductByID(prodCode: number) {
    const product = PRODUCTLIST.find(s => s.prodCode === prodCode);
    return product;
}


constructor() { }
}

I used the splice method to remove

Component class

import { Component, Input, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Product } from '../Product';
import { ProductDatabaseService } from '../product-database.service';
import { Location } from '@angular/common';
import { Router } from '@angular/router';
@Component({
selector: 'app-product-details',
templateUrl: './product-details.component.html',
styleUrls: ['./product-details.component.css']
})

export class ProductDetailsComponent implements OnInit {
selectedProduct: Product | undefined;
productList: Product[] = [];
constructor(private productDBService: ProductDatabaseService,
private route: ActivatedRoute,
private location: Location,
private router: Router,
private router2: Router) { }

ngOnInit(): void {
    this.getProduct();
}

getProduct(): void {
    const prodCode = Number(this.route.snapshot.paramMap.get('prodCode'));
    this.selectedProduct = this.productDBService.getProductByID(prodCode);
}

updateProduct(prodCode: number) {
    this.router.navigate(['update-product', prodCode]);
}

deleteProduct(code: number) {
    this.productDBService.deleteProduct(code);
}

}

HTML Code

<div  *ngIf="selectedProduct">
      <div >
       <h2>{{selectedProduct.prodName | uppercase}} Details</h2>
      </div>
      <table >
        <thead>
          <tr>
            <th scope="col">Product Code</th>
            <th scope="col">Product Name</th>
            <th scope="col">Product Price</th>
            <th scope="col">Product Details</th>
            <th scope="col">Actions</th>
            <th scope="col">Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">{{selectedProduct.prodCode}}</th>
            <td>{{selectedProduct.prodName}}</td>
            <td>{{selectedProduct.prodPrice}}</td>
            <td>{{selectedProduct.prodDetails}}</td>
          <td><button (click)="updateProduct(selectedProduct.prodCode)" class ="btn btn-danger">Update</button></td>
          <td><button (click)="deleteProduct(selectedProduct.prodCode)" class ="btn btn-danger">Delete</button></td>
          </tr>
    
          </tbody>
          </table>
    
          <div >
            <br>
            <button type="button" >Edit</button>
            <button type="button" >Delete</button>
           
          </div>
          <div>
          <a  (click)="navigateBack()" >Go Back</a>
          </div>

  
</div>

CodePudding user response：

You should pass second parameter 1 to splice(), like this:

const product = PRODUCTLIST.splice(prodCode, 1);

That will specify the number of items that will be removed from the array. If you don't do that, if will remove all items after the specified index.

CodePudding user response：

That's because you're using splice the wrong way. To remove with the splice method an item you would need to specify the amount of items you want to delete/add. In addition to that, the first argument of the splice method is the INDEX of the item to remove. So before calling the splice method. So you would do something like:

var array = [{prodCode: 20, name: "Product 1"}, {prodCode: 21, name: "Product 2"}, {prodCode: 22, name: "Product 3"}]
//we get the index of the item to remove
var indexToRemove = array.findIndex(product => product.prodCode == 21)
//we splice the array from the index of the item to remove of 1 item (the single item to remove)
array.splice(indexToRemove, 1);

here is a simple jsFiddle, just using the console to print the result:

https://jsfiddle.net/baduCleo/fhr3kzc4/