Angular购物车删除商品后数组更新异常问题求助

Hey there! I see the issue you're facing—when you delete an item from the cart, the page only updates after a refresh or another delete. Let's break down why this is happening and fix it.

The Root Cause #

Your current code calls generateCart() right after triggering the delete request, but HTTP requests are asynchronous. That means the refresh request might finish before the delete request completes, so you're still fetching the old cart data.

Step-by-Step Fix #

1. Update the Cart Service to Return the Observable #

First, let's modify the deleteFromCart method in shopping-cart.service.ts to return the Observable instead of subscribing to it directly. This lets the component control when to run the refresh logic:

// shopping-cart.service.ts
public getCart(): Observable<CartRequest> {
  return this.http.get<CartRequest>(environment.apiUrl + Api.v1.cart.cart);
}

// Return the Observable instead of subscribing here
deleteFromCart(cartListItem: CartListItem): Observable<any> {
  const deleteUrl = `${url}/${cartListItem.cartItemId}`; // Template literal for cleaner code
  return this.http.delete(deleteUrl);
}

2. Trigger Cart Refresh Only After Delete Succeeds #

Now, in cart-list-item.component.ts, we'll subscribe to the delete Observable and call generateCart() only after the delete request successfully finishes:

// cart-list-item.component.ts
deleteFromCart() {
  this.shoppingCartService.deleteFromCart(this.cartItem)
    .subscribe({
      next: () => {
        console.log('Deleted item ', this.cartItem.cartItemId);
        // Refresh cart NOW that the delete is done
        this.cartList.generateCart();
      },
      error: (error) => {
        console.error('Failed to delete item:', error);
        // Optional: Add user-facing error feedback here (e.g., toast message)
      }
    });
}

3. Optional: Clean Up the generateCart Method #

You can simplify your generateCart method in cart-list.component.ts by using map to create the new cart items array directly, instead of clearing and pushing items one by one. This is cleaner and ensures Angular's change detection picks up the update smoothly:

// cart-list.component.ts
public generateCart() {
  this.shoppingCartService.getCart().subscribe((data: CartRequest) => {
    // Use map to transform the API response into CartListItem objects
    this.cartItems = data.cartItems.map(a => ({
      cartItemId: a.cartItemId,
      image: '..',
      name: '..',
      itemNumber: '123 456 789',
      orderNumber: '265 715 365',
      quantity: a.quantity,
      units: ['Stk', 'Kg', 'mm'],
      total: '150,00'
    }));
    console.log(this.cartItems);
  });
}

Why This Works #

By moving the subscription to the component and waiting for the delete request to complete before refreshing the cart, you ensure that you're always fetching the latest cart data after the delete operation is done. No more stale data showing up!

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