Within a parent component, there is a list:
items: SomeType;
The values of this list are obtained from a service:
this.someService.items$.subscribe(items => {
this.items = items;
});
At some point, the list is updated with new criteria:
this.someService.getData(this.criteria);
This process functions correctly.
There is also a child component that is inserted for each element in the list:
<ul *ngFor="for let item of items">
<app-list-item [item]="item"></app-list-item>
</ul>
This functionality works as expected, but only when the initial load of this.items in the parent component occurs.
The child component also retrieves data from a service:
ngOnInit() {
this.someOtherService.mapping$.subscribe(mapping => {
this.mapping = mapping;
});
}
ngOnDestroy() {
this.someOtherService.mapping$.unsubscribe();
}
However, when the criteria within the parent component change and the item list is reloaded, the child component encounters the following error message:
Error message: "object unsubscribed" name: "ObjectUnsubscribedError"
When I remove
this.someOtherService.mapping$.unsubscribe();ngOnDestroy method of the child component, it functions properly again. But should I not unsubscribe when the component is destroyed?