Angular 2 - *ngFor with keys pipe is not refreshed when object is changed

Question

I'm using keys pipe in *ngfor loop. Data are fed in JSON.

    @Pipe({
      name: 'keys'
    })
    export class KeysPipe implements PipeTransform {
      transform(value, args: string[]): any {
        if (!value) {
          return value;
        }

        let keys = [];
        for (let key in value) {
          keys.push({key: key, value: value[key]});
        }
        return keys;
      }
   }

--

<div *ngFor="let item of jsonObject | keys">
        <p>{{ item.value.code }}</p>
</div>

The problem is when I delete on of the element in JSON, ngFor is not updated.

I have tried two option already:

• calling this.applicationRef.tick(); after element delete, no change
• impure pipe "pure: false". This caused enormous memory usage in chrome in hundreds of MBs and I had to kill the process.

If there any other way?

Thanks!

Answer 1

One way which you can try:

delete(id) {
  this.jsonObject = this.jsonObject.filter(x => x.id !== id);
}

This way you won't mutate the original array. That's crutial thing for pipe

See also

• NgFor doesn't update data with Pipe in Angular2
• Unraveling Angular 2 book, Chapter 1, Example 5

Answer 2

Pure pipes dont run unless the reference or value is changed. To fix this add pure: false to your Pipe decorator. See Pipes

ex.

@Pipe({
    name: 'keyVal',
    pure: false
})
export class KeyValPipe implements PipeTransform {
    ...
}

EDIT I didnt see that the OP had already done this. Another option is to set a temp variable and then assign jsonObject to it thus creating a new reference. You could also try a deep copy from temp to jsonObject