title: angular9 ngfor removing object from array shows undefined error
body: <p>I have an array of items which are objects.
  The items are called from a service and shown when I go on the cart page.</p>
  <p>When I click the remove button I run <code>delete this.cart.items[i];</code>.
  this.cart is my service, and removes the item from the object. It successfully does this on the page too but I then get a blank element and errors in console saying <code>Cannot read property 'qty' of undefined</code>.
  I assumed the ngfor will auto update the the DOM and remove the element as that object no longer exists.
  Would I also have to remove the element from the DOM manually?</p>
  <p>from the array below, I wanted to remove the first item completely but still show the second.</p>
  <pre><code>[
    {
      &quot;desc&quot;: &quot;Description&quot;,
      &quot;item&quot;: &quot;item 1&quot;,
      &quot;id&quot;: &quot;1&quot;,
      &quot;portion&quot;: &quot;small&quot;,
      &quot;price&quot;: &quot;4.25&quot;,
      &quot;qty&quot;: 3
    },
    {
      &quot;desc&quot;: &quot;Description&quot;,
      &quot;item&quot;: &quot;item 2&quot;,
      &quot;id&quot;: &quot;2&quot;,
      &quot;portion&quot;: &quot;large&quot;,
      &quot;price&quot;: &quot;4&quot;,
      &quot;qty&quot;: 1
    }
  ]
  
  
  &lt;div class=&quot;cart-item&quot; *ngFor=&quot;let item of items&quot; (click)='ontap(item);'&gt;
      {{ x.item }}
  &lt;/div&gt;
  </code></pre>
  <p>this is where I display it, but it still shows the elemnt with no data.
  Thanks</p>