Angular中更新产品数量后视图未实时更新问题求助

Hey there! Let's dig into why your Angular view isn't updating right away after you change product quantities.

First, let's break down the issue: When you call getProduct() after a successful update, you're assigning res directly to this.productList. Sometimes Angular's change detection doesn't pick up on this if the object reference doesn't change (even if the data inside does). Also, that extension operator you tried—this.productList=[...this.productList,res]—threw an error because productList is an object with a data array, not an array itself. You can't spread an object into an array like that!

Here are a few fixes you can try, ordered from simplest to more targeted:

1. Force a new object reference when updating productList #

Angular's change detection relies on reference changes to trigger updates. Instead of assigning res directly, create a new object to break the old reference:

getProduct() {
  let body = {
    filterBy: 'old',
    searchKey: '',
  };
  this._productSs.getProductList(body).subscribe((res: any) => {
    res.data.forEach((element: any) => {
      Object.assign(element, { count: 0 });
    });
    // Create a new object instead of reusing the same reference
    this.productList = { ...res };
  });
}

This tells Angular that the productList has changed, so it'll re-render the view.

2. Add a trackBy function to your *ngFor #

Sometimes *ngFor gets confused when items update, especially if they don't have a stable unique identifier. Adding a trackBy helps Angular track which items have changed without re-rendering the entire list:

• In your component, add this method:

  trackByProductId(index: number, product: any): number {
    return product.id; // Use your product's unique ID property here
  }
  

• Update your HTML:

  <div class="container" *ngFor="let item of productList.data; let i=index; trackBy: trackByProductId">
  

3. Manually trigger change detection (if needed) #

If the first two fixes don't work, you can manually tell Angular to check for changes using ChangeDetectorRef:

1. Import it in your component:

   import { ChangeDetectorRef } from '@angular/core';
   

2. Inject it in your constructor:

   constructor(private _productSs: ProductService, private cdr: ChangeDetectorRef) {}
   

3. Call detectChanges() after updating productList:

   this._productSs.getProductList(body).subscribe((res: any) => {
     res.data.forEach((element: any) => {
       Object.assign(element, { count: 0 });
     });
     this.productList = res;
     this.cdr.detectChanges(); // Force Angular to update the view
   });
   

4. Optimize: Update local data instead of re-fetching the entire list #

Instead of calling getProduct() every time (which makes an extra API call), you can update the local productList directly after a successful update. This is faster and avoids any API-related delays:

updateQuantity(count: any, id: any) {
  let body = {
    productId: id,
    quantity: count.toString(),
  };
  this._productSs.updateQuantity(body.quantity, body.productId).subscribe((res) => {
    if (res.message == 'SUCCESS') {
      // Find the index of the updated product in the local list
      const productIndex = this.productList.data.findIndex(item => item.id === id);
      if (productIndex !== -1) {
        // Update the product and create a new array reference
        this.productList.data = [
          ...this.productList.data.slice(0, productIndex),
          { ...this.productList.data[productIndex], count: count },
          ...this.productList.data.slice(productIndex + 1)
        ];
        // Also update the parent object reference to trigger change detection
        this.productList = { ...this.productList };
      }
    }
  });
}

Try these fixes one by one—most likely the first or second will solve your view update issue!

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