How to delete items of nested objects // ERROR TypeError: "_v.context.$implicit is undefined"

Question

I have a list of objects, which is shown with ngFor and ngSwitchCase. Adding items to the objects as well as removing the object itself is no problem. But If I try to remove items nested inside the object, this error shows up:

ERROR TypeError: "_v.context.$implicit is undefined"

The objects is/seems gone, because the information is not displayed, but the div's aka design/rendering with ngFor is messed up. (I'm using Angular8.)

Here is a slimmed down version of my problem: https://stackblitz.com/edit/angular-jjsvzh

In the Stackblitz example, i get another error though, trying the same:

ERROR TypeError: "this.articles[0].content[boxId] is undefined"

I just dont get why when I remove the object, "delete" works perfectly, but the other time it doesn't.

closeContentBox(boxId) {
    console.log('I close contentBoxes');
    delete this.articles[0].content[boxId];
  }

  removeItemBox(boxId, itemId) {
    console.log('I remove itemBoxes');
    delete this.articles[0].content[boxId].data.items[itemId];  
  }

maybe related, but didnt help: implicit context is undefined, angular 7

Answer 1

try this:

 removeItemBox(boxId, itemId) {
// delete this.articles[0].content[boxId].data.texts[itemId];  
this.articles[0].content[boxId].data.texts.splice(itemId, 1);}  

also in the html, make change to the first argument like so:

<div class="removeButton" (click)="removeItemBox(boxId, itemId)