CODEWITHSUNDEEP
angular
daemon
daemon

Reputation: 372

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

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:

If there any other way?

Thanks!

Upvotes: 7

Views: 2781

Answers (2)

yurzui
yurzui

Reputation: 214095

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

Upvotes: 6

ZaksBack
ZaksBack

Reputation: 189

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

Upvotes: 5

Related Questions