映射数组并根据条件将对象推入另一个数组的问题 Angular

Question

我正在尝试设置一个收银员屏幕..基本上我需要一个 addToCart 功能..非常简单吧？！我面临一些奇怪的逻辑错误。我所做的是单击一个项目，捕获它并将其作为参数传递给一个函数，该函数依次映射我的 Bill 数组以检查该项目是否已存在。如果确实如此，它只会将数量加一，否则，它将将该项目推入数组中。一切都运行良好，直到我删除一个项目并将其重新添加到数组中。它会保留之前的数量，如果它是 5，那么即使在删除后它仍保留 5。为了更好的解释，这是我的代码......这就是我将商品添加到 Bill（购物车）的方式... TypeScriptaddToCart(item: SalesScreenItemsModel) {let itemExists = false;// tslint:disable-next-line: variable-namethis.Bill.map((ele, _index) => {  if (item.itemId === ele.itemId) {    itemExists = true;    ele.itemQuantity = ele.itemQuantity + 1;  }  return ele;});if (itemExists === false) {  this.Bill.push(item);}超文本标记语言<div class="col-xl-3 col-lg-4 col-md-4 col-sm-6 col-xs-12" *ngFor="let item of items"><div class="card mb-3 widget-content bg-arielle-smile item-pic" style="overflow: hidden; padding: 0;"><div class='box'>  <div class='content'>    <div class="widget-content-wrapper text-white content" style="justify-content: center;">      <div class="widget-content-left text-center">        <img src="{{ item.itemPicture}}" alt="Raised image" class="img-fluid" (click)="addToCart(item)">      </div>    </div>  </div></div>删除功能deleteBillItem(itemIndex: number) {this.Bill.splice(itemIndex, 1);}超文本标记语言<tr *ngFor="let bill of Bill; let i = index">                      <th scope="row" class="text-center">{{i + 1}}</th>                      <td class="text-center">{{bill.itemName}}</td>                      <td class="text-center">{{bill.itemQuantity}}</td>                      <td class="text-center">{{ bill.itemPrice * bill.itemQuantity }}</td>                      <td class="text-center">                        <button class="btn-icon btn-icon-only btn btn-outline-danger" (click)="deleteBillItem(i)"                          style="padding: 1px 6px;">                          <i class="pe-7s-trash btn-icon-wrapper"> </i>                        </button>                      </td>                    </tr>问题是，当我记录我的物品数组时，物品数量的变化实际上发生在主数组和账单上......我知道这应该很简单，这就是为什么它让我发疯......

Answer 1

问题是您缺少以下作业map：

this.Bill = this.Bill.map...

但是，作为建议，您可以编写一种更实用的方法：

addToCart(item: SalesScreenItemsModel) {

  const itemExists = this.Bill.some(element => element.itemId === item.itemId);

  if (itemExists) {

    this.Bill = this.Bill.map(element => ({

      ...element,

      itemQuantity: element.itemQuantity + (element.itemId === item.itemId ? 1 : 0)

    }));

  } else {

    this.Bill = [...this.Bill, item];

  }

}

对于remove：

deleteBillItem(itemIndex: number) {

  this.Bill = this.Bill.filter((element, index) => index !== itemIndex);

}

另外，Bill这不是数组/列表的最佳名称:)

Answer 2

添加项目时尝试将 item.itemQuantity 设置为 1

addToCart(item: SalesScreenItemsModel) {

// tslint:disable-next-line: variable-name

const itemIndex=this.Bill.find((billItem) => item.itemId == billItem.itemId);

if(itemIndex == -1){

   item.itemQuantity=1;

   this.Bill.push(item);

   return;

}

this.bill[itemIndex].itemQuantity+=1;

}