CODEWITHSUNDEEP
angularionic2
C. Sysmans
C. Sysmans

Reputation: 453

ngFor not updating when item removed

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.

Upvotes: 7

Views: 6893

Answers (2)

ajd.nas
ajd.nas

Reputation: 404

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);  
  }

Upvotes: 3

Klemens Zleptnig
Klemens Zleptnig

Reputation: 1824

In my case ChangeDetectorRef.detectChanges() did the trick. The problem seems to appear when you update the model from an Observable, for example the response of a Http.get().

Using NgZone.run() didn't help, I tried that before.

Upvotes: 0

Related Questions