Проблема с отображением массива и помещением объекта в другой массив на основе условия Angular

Question

Я пытаюсь настроить экран кассы ... и в основном мне нужна функция addToCart .. довольно просто, да ?! Я сталкиваюсь с какой-то странной логической ошибкой, что ... что я делаю, это щелчок элемента, я фиксирую его и передаю в качестве параметра функции, которая, в свою очередь, отображает мой массив Билла, чтобы проверить, существует ли элемент там или нет .. и если он это делает, он просто увеличивает количество на единицу, в противном случае он помещает элемент в массив.

Все работает хорошо, пока я не удалю элемент и не добавлю его снова в массив. это предыдущее количество, если оно было 5, то оно остается с 5 даже после удаления.

Для лучшего объяснения, вот мой код ...

Так я добавляю свои товары в Билл (корзина) ... 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);
}

HTML

<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);

}

HTML

<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;
}