title: Issue with mapping an array and pushing object into another array based upon a condition Angular
body: <p>I am trying to set up a cashier screen.. and basically I need an addToCart function.. pretty simple huh?! 
  am facing some weird logical error tho.. what I do is on click of an item, I capture it and pass it as a parameter to a function which in turn maps my Bill array to check whether or not the item already exists there.. and if it does it just increases the quantity by one, otherwise, it pushes the item into the array..</p>
  
  <p>It all works well until I delete an item and re-add it into the array.. it keeps it's previous quantity, if it was 5 then it remains with 5 even after deletion.</p>
  
  <p>For a better explanation, here is my code...</p>
  
  <p>This is how I add my items to Bill (cart)...
  TypeScript</p>
  
  <pre><code>addToCart(item: SalesScreenItemsModel) {
  let itemExists = false;
  // tslint:disable-next-line: variable-name
  this.Bill.map((ele, _index) =&gt; {
    if (item.itemId === ele.itemId) {
      itemExists = true;
      ele.itemQuantity = ele.itemQuantity + 1;
    }
    return ele;
  });
  if (itemExists === false) {
    this.Bill.push(item);
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="col-xl-3 col-lg-4 col-md-4 col-sm-6 col-xs-12" *ngFor="let item of items"&gt;
  &lt;div class="card mb-3 widget-content bg-arielle-smile item-pic" style="overflow: hidden; padding: 0;"&gt;
  &lt;div class='box'&gt;
    &lt;div class='content'&gt;
      &lt;div class="widget-content-wrapper text-white content" style="justify-content: center;"&gt;
        &lt;div class="widget-content-left text-center"&gt;
          &lt;img src="{{ item.itemPicture}}" alt="Raised image" class="img-fluid" (click)="addToCart(item)"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>delete function</p>
  
  <pre><code>deleteBillItem(itemIndex: number) {
  this.Bill.splice(itemIndex, 1);
  </code></pre>
  
  <p>}</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;tr *ngFor="let bill of Bill; let i = index"&gt;
                        &lt;th scope="row" class="text-center"&gt;{{i + 1}}&lt;/th&gt;
                        &lt;td class="text-center"&gt;{{bill.itemName}}&lt;/td&gt;
                        &lt;td class="text-center"&gt;{{bill.itemQuantity}}&lt;/td&gt;
                        &lt;td class="text-center"&gt;{{ bill.itemPrice * bill.itemQuantity }}&lt;/td&gt;
                        &lt;td class="text-center"&gt;
                          &lt;button class="btn-icon btn-icon-only btn btn-outline-danger" (click)="deleteBillItem(i)"
                            style="padding: 1px 6px;"&gt;
                            &lt;i class="pe-7s-trash btn-icon-wrapper"&gt; &lt;/i&gt;
                          &lt;/button&gt;
                        &lt;/td&gt;
                      &lt;/tr&gt;
  </code></pre>
  
  <p>Thing is when I log my items array the change to item quantity actually occurs to the main array as well as to the bill... I know this should be simple and that's why it's driving me nuts...</p>