Angular商品列表删除异常：误删其他项而非指定项求助

我想从商品列表中删除指定的商品项，但当前代码执行后会删除其他商品而非目标项。已经传入要删除的prodCode，但并未生效，不清楚为何会误删其他项，恳请帮助。

我使用了splice方法来实现删除操作。

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() { }
}

Component类代码 #

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代码 #

<div class="card" *ngIf="selectedProduct">
      <div class="card-header">
       <h2>{{selectedProduct.prodName | uppercase}} Details</h2>
      </div>
      <table class="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 class="vstack gap-2 col-md-4 mx-auto">
            <br>
            <button type="button" class="btn btn-secondary">Edit</button>
            <button type="button" class="btn btn-danger">Delete</button>
           
          </div>
          <div>
          <a  (click)="navigateBack()" class="btn btn-dark">Go Back</a>
          </div>

  
</div>

问题核心是deleteProduct方法中splice的用法错误：

• Array.splice(index) 会删除从index位置开始到数组末尾的所有元素，而非指定prodCode对应的项
• 你传入的是商品编码prodCode，但splice第一个参数需要的是数组的索引位置，不是商品编码

修改Service中的deleteProduct方法即可：

deleteProduct(prodCode: number) {
    // 找到对应prodCode的商品在数组中的索引
    const index = PRODUCTLIST.findIndex(s => s.prodCode === prodCode);
    // 找到索引则删除该位置的1个元素
    if (index !== -1) {
        const deletedProduct = PRODUCTLIST.splice(index, 1);
        return deletedProduct;
    }
    // 未找到返回空数组
    return [];
}

另外，删除后建议路由回商品列表页面，让用户看到更新后的列表，可在Component的deleteProduct方法中添加跳转逻辑：

deleteProduct(code: number) {
    this.productDBService.deleteProduct(code);
    // 跳转到商品列表页面（根据你的路由配置调整路径）
    this.router.navigate(['/product-list']);
}

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