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

Question

我正在尝试设置一个收银员屏幕..基本上我需要一个 addToCart 功能..非常简单吧？！我面临一些奇怪的逻辑错误。我所做的是单击一个项目，捕获它并将其作为参数传递给一个函数，该函数依次映射我的 Bill 数组以检查该项目是否已存在。如果确实如此，它只会将数量加一，否则，它将将该项目推入数组中。

一切都运行良好，直到我删除一个项目并将其重新添加到数组中。它会保留之前的数量，如果它是 5，那么即使在删除后它仍保留 5。

为了更好的解释，这是我的代码......

这就是我将商品添加到 Bill（购物车）的方式... TypeScript

addToCart(item: SalesScreenItemsModel) {

let itemExists = false;

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

this.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) {&nbsp; const itemExists = this.Bill.some(element => element.itemId === item.itemId);&nbsp; if (itemExists) {&nbsp; &nbsp; this.Bill = this.Bill.map(element => ({&nbsp; &nbsp; &nbsp; ...element,&nbsp; &nbsp; &nbsp; itemQuantity: element.itemQuantity + (element.itemId === item.itemId ? 1 : 0)&nbsp; &nbsp; }));&nbsp; } else {&nbsp; &nbsp; this.Bill = [...this.Bill, item];&nbsp; }}对于remove：deleteBillItem(itemIndex: number) {&nbsp; this.Bill = this.Bill.filter((element, index) => index !== itemIndex);}另外，Bill这不是数组/列表的最佳名称:)

Answer 2

添加项目时尝试将 item.itemQuantity 设置为 1addToCart(item: SalesScreenItemsModel) {// tslint:disable-next-line: variable-nameconst itemIndex=this.Bill.find((billItem) => item.itemId == billItem.itemId);if(itemIndex == -1){&nbsp; &nbsp;item.itemQuantity=1;&nbsp; &nbsp;this.Bill.push(item);&nbsp; &nbsp;return;}this.bill[itemIndex].itemQuantity+=1;}