Splice不删除数组- Angular12中的任何项。

Question

我正在尝试创建一个函数，用于从购物车中删除特定的项目。它不会产生任何错误，但是当我单击按钮时，什么都不会发生。知道有什么问题吗？关于我的问题，请看下面的代码。

service.ts

removeCartItem(product: Product){
    this.cartItemList.map((a:any, index:any)=>{
      if(product.id=== a.id){
        this.cartItemList.splice(index,1); 
      }
    })

cartitem.component.html

<div class="cartitem">
  <div class="container">
    <div class="row">
      <div class="col">
        {{ cartItem.name }}
      </div>
      <div class="col">
        <img [src]="cartItem.imageUrl" class="card-img-top" alt="..." />
      </div>
      <div class="col-5">
        {{ cartItem.description }}
      </div>
      <div class="col">{{ cartItem.price | currency: "EUR" }}</div>
      <div class="col">{{ cartItem.qty }}</div>
      <div>
        <button (click)="removeItem(item)" class="btn btn-primary">
          Remove from cart
        </button>
      </div>
    </div>
  </div>
</div>

cartitem.component.ts

  constructor(public service: MessengerService) { }

  ngOnInit(): void {
  }
 removeItem(item: Product){
    this.service.removeCartItem(item);
  } 

cart.component.ts

 cartItems: Product[] = [];

  cartTotal = 0;

  product: any;

  constructor(private msg: MessengerService, public dialog: MatDialog) {}

  ngOnInit() {
    this.msg.getMsg().subscribe((product: Product) => {
      this.addProductToCart(product);
    });
  }

  addProductToCart(product: Product) {
    let productExists = false;

    for (let i in this.cartItems) {
      if (this.cartItems[i].id === product.id) {
        this.cartItems[i].qty++;
        productExists = true;
        break;
      }
    }
    if (!productExists) {
      this.cartItems.push({
        id: product.id,
        name: product.name,
        description: product.description,
        qty: 1,
        price: product.price,
        imageUrl: product.imageUrl,
        purchased:product.purchased
      });
    }
    this.cartItems.forEach((item) => {
      this.cartTotal += item.qty * item.price;
    });
  }

cart.component.html

<ul *ngIf="cartItems.length > 0" class="list-group">
  <li class="list-group-item">
    <h3>My Cart</h3>
  </li>

  <li class="list-group-item" *ngFor="let item of cartItems">
    <app-cartitem [cartItem]="item"></app-cartitem>
  </li>
  <li class="list-group-item">
    <span>Total: {{ cartTotal | currency: "EUR" }} </span>
  </li>
  <li class="list-group-item">
    <button
      id="btnFinalize"
      class="btn btn-primary"
      (click)="purchaseDisabled(product)"
    >
      Finalize purchase
    </button>
  </li>
</ul>

Answer 1

问题是你正试图在地图中拼接。更改为以下内容将有效：

removeCartItem(product: Product){
    let indexToRemove: number = -1;

    this.cartItemList.map((a:any, index:any)=>{
      if(product.id === a.id){
        indexToRemove = index;
      }

      return a;
    });
    
    if(indexToRemove !== -1){
       this.cartItemList.splice(indexToRemove,1); 
    }  
}

但是请注意，这里没有必要使用地图。再次复制整个数组是浪费时间和内存。只要在数组中循环一次，找到要删除的索引就足够了：

removeCartItem(product: Product){
    let indexToRemove: number = -1;
    let index: number = 0;

    for(const cardItem of this.cartItemList){
      if(product.id === cardItem.id){
        indexToRemove = index;
      }
      
      index++;
    }

    if(indexToRemove !== -1){
       this.cartItemList.splice(indexToRemove,1); 
    }  
}