Angular2 Child component destroyed unexpectedly in ngFor

Question

So i have this Component of a from with an @Output event that trigger on submit, as follows:

@Component({
    selector: 'some-component',
    templateUrl: './SomeComponent.html'
})
export class SomeComponent{    
    @Input() data: any;
    @Output() onSubmit: EventEmitter<void> = new EventEmitter<void>();

    constructor(private someService: SomeService) {}

    submitForm(): void{
        this.someService.updateBackend(this.data, ()=>{
            this.onSubmit.emit();
        });
    }
}

I'm using an ngFor to create multiple elements of this Component :

<template let-data ngFor [ngForOf]="dataCollection">
    <some-component  [data]="data" (onSubmit)="doSomthing()"></some-component>
</template>

The last missing part is the service used on submitting:

@Injectable()
export class SomeService{

    constructor() {}

    updateBackend(data: any, callback: () => void): void{
        /*
         * updating the backend
         */.then((result) => {
            const { errors, data } = result;

            if (data) {
                callback();
            }
        })
    }
}

At the beginning of the submitForm() function, the this.onSubmit.observers is an Array containing one observer, like it should be.

As soon as it reaches the callback method, where the this.onSubmit.emit() is invoked, the this.onSubmit.observers is an Array containing ZERO observers.

I'm experiencing two very weird behaviors:

• If i remove the actual calling to update the backend in SomeService.updateBackend it works perfectly fine, and the observers still is an Array containing one observer!
• If i keep the actual calling to the backend BUT not using ngFor and displaying only one <some-element> it also works perfectly fine, keeping one observer in the this.onSubmit.observers within the callback scope!

Any idea what am i doing wrong?

Thanks in advance!

Update:

Thanks to @StevenLuke's comment about logging the ngOnDestroy of SomeComponent I found out that it is being destroyed before the emit.

Actually, the first thing it is doing when the SomeService.updateBackend finishes is Destroying all the instances of this component and recreate them!

This is what makes the observers change! Why would that happen?

Answer 1

If you provide a trackBy function in your *ngFor to identify items in your dataCollection, it will not destroy and init. Your template would be:

<some-component *ngFor="let data of dataCollection;trackBy:trackByFunction"
  [data]="data" (onSubmit)="doSomthing()"></some-component>

And the trackByFunction would look like:

trackByFunction(index, item) {
    return item ? item.id : undefined;
}

So even though an item in your dataCollection is a fresh object, if its id matches an id in the previous collection, *ngFor will update [data] but not destroy and init the component.

Answer 2

Thanks to @GünterZöchbauer comments I found out the case was that the data the ngFor is bound to was being replaced by a new instance as I updated the backend, hence, it rerendered it's child Components causing reinitializing (destory + init) of them, which made the instance of the Component to be overwritten.

In order to solve this issue i had to place the dataCollection in a separate service, getting it for the parent component ngOnInit, saving it from causing a rerender of the ngFor, and fetch its data again only after the execution of the Child Components ended

Hope it'll be helpful to somebody!