0

My templates iterates through groups and renders some nested elements, lists e.t.c.:

<ul>
<li *ngFor="let group of groups">
...
    <ul class="list_devices">
        <li class="row list_devices_header" *ngIf="getNumberOfDevicesInGroup(group.id) > 0">
                                ...
        </li>
        <li class="row" *ngFor="let item of devices | matchesGroup:group.id">
                     ...
        </li>
    </ul>
</li>
</ul>

Problem is, that when I remove a group from array:

delete this.groups[index]

rendered layout is still there and errows are thrown:

DeviceListComponent.html:122 ERROR TypeError: Cannot read property 'id' of undefined

for nested directives, which use already deleted object.

Maybe I'm doing it the wrong way. I want to delete a group and have all nested elements be gone. How would I do that the right way?

Thank you

bravik
  • 433
  • 7
  • 17

1 Answers1

2

Instead of delete this.groups[index] you could just use splice

Try this this.groups.splice(index, 1)

For the difference, check this question out Deleting array elements in JavaScript - delete vs splice

Bunyamin Coskuner
  • 8,719
  • 1
  • 28
  • 48