ngFor not updating when item removed

Question

I'm using *ngFor inside a page template (Ionic 2).

<div class="child" *ngFor="let child of sharedParams.children">
        ...
</div>

Somewhere inside the app, I update the children array when changes are detected (add, update, remove). I do this be assigning a new array to the property:

export class SharedParams {    
    private _children: Child[];

    constructor(children: Child[]){
        this._children = children;
    }

    get children(){
        return this._children;
    }

    set children(children: Child[]){        
        this._children = children;
    }
}

When an item is added or updated inside the array, the ngFor is triggered and the DOM is updated. However, when an item is removed, the array is changed, but the DOM does not remove the entry for that item.

I've also tried to manually modify the array instead of replacing it, using 'push' and 'splice'. But the behaviour stays the name. The DOM is never updated when an item is removed.

Any help would be greatly appreciated.

Answer 1

You can use ChangeDetectorRef to check and update the list every 0.5 seconds or more...

For example:

constructor(private ref: ChangeDetectorRef) {
    console.log('Hello PhotoComponent Component');  
    setInterval(() => {
      this.ref.detectChanges();
    }, 500);  
  }