我想在以角度更新我的产品数量后更新我的视图答案

【问题标题】：I want to update my view after updating my product quantity in angular我想在以角度更新我的产品数量后更新我的视图
【发布时间】：2021-11-09 11:58:07
【问题描述】：

我创建了一个 UI，其中显示了产品列表，并有用于更新产品数量的更新按钮（get 和 update 方法都会访问我的数据库）。现在我已经成功渲染了 productlist，我的更新功能也在工作。问题是更新我的产品后视图没有显示当前数据。页面重新加载或点击更新按钮 2-3 次需要更新我的视图。尝试使用这样的传播运算符 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() 并获取更新的产品价值

【问题讨论】：

我认为你的设计很糟糕。 this._productSs.updateQuantity 不应该返回消息，而是返回一个包含您的产品和消息的对象。通过这种方式，您可以避免另一个服务器请求使用 getProductList 方法返回产品。
您遇到了什么错误？
@JeffryHouser 没有收到任何错误只是我的视图没有更新
@Rakin 您的帖子确实说“但显示错误”，这就是我询问错误的原因。您应该澄清您希望看到的结果以及您正在看到的结果。

标签： angular ngfor angular12

【解决方案1】：

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

将 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">

【讨论】：

view 正在更新问题是无法访问 count 属性，我需要使用此方法加减数量：plus(number: number, index: number) { this.productList$[index] .count = +this.productList$[index].count + 1;我也尝试通过 this.productList$.subscribe((res) => { debugger; res[index].count = +res[index].count + 1; console.log('plus', res ); })

【解决方案2】：

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

试试这个：

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

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

      });

【讨论】：