我想在 angular 更新我的产品数量后更新我的视图

Question

我创建了一个 UI，其中显示了产品列表，并有用于更新产品数量的更新按钮（获取和更新方法都会访问我的数据库）。现在我已经成功呈现产品列表和我的更新功能也在工作。问题是视图在更新我的 product.Page 重新加载或 2-3 次点击更新按钮后不显示当前数据需要将我的 view.try 更新为使用像这样的传播运算符 this.productList=[。 ..this.productList,res] 但是显示错误。这是我到目前为止所做的

用于获取产品

productList: any;

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

getProduct() {
    let body = {
      filterBy: 'old',
      searchKey: '',
    };
    this._productSs.getProductList(body).subscribe((res: any) => {
      res.data.forEach((element: any) => {
        Object.assign(element, { count: 0 });
      });
     
      this.productList = res;
   
    });

更新方法

  updateQuantity(count: any, id: any) {
    let body = {
      productId: id,
      quantity: count.toString(),
    };
    let productId = id;
    let quantity = count.toString();
  
    this._productSs.updateQuantity(quantity, productId).subscribe((res) => {
      if (res.message == 'SUCCESS') {
        this.getProduct();
      }
    });
  }

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

在更新方法中，我调用 getProduct() 并获取更新后的产品值

Answer 1

问题可能是由于 Object.assign，因为它 returns 在分配计数后更新了对象元素，在您的情况下，它更新了值但返回的对象没有分配回来到元素。

试试这个：

this._productSs.getProductList(body).subscribe((res: any) => {
      res.data.forEach((element: any) => {

        element = Object.assign(element, { count: 0 });

      });

Answer 2

您必须进行一些重构才能使其正常工作：

将 productList 更改为 Observable 并使用异步管道
使用 switchMap 避免在另一个订阅中订阅

这是您可以做的

productList$: Observable<any>;

ngOnInit() {
  this.productList$ = this.getProduct()
}

getProduct() {
  let body = {
   filterBy: 'old',
   searchKey: '',
  };

  return this._productSs.getProductList(body)
   .pipe(
     map((res: any) => {
       res.data.forEach((element: any) => {
         Object.assign(element, { count: 0 });
       });
       return  res
    })
   )
}


updateQuantity(count: any, id: any) {
  let body = {
   productId: id,
   quantity: count.toString(),
  };
  let productId = id;
  let quantity = count.toString();

  this.productList$ =this._productSs.updateQuantity(quantity, productId).pipe(
    switchMap(res => this.getProduct())
  )
}

并在您的模板中

<div class="container" *ngFor="let item of productList$ | async;let i=index">

我想在 angular 更新我的产品数量后更新我的视图

I want to update my view after updating my product quantity in angular

ngfor

angular

angular12