Angular 2 - *ngFor with keys pipe在更改对象时不会刷新

Question

我在*ngfor循环中使用密钥管道.数据以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>

问题是当我删除JSON中的元素时,ngFor没有更新.

我已经尝试了两个选项:

• 调用this.applicationRef.tick(); 元素删除后,没有变化
• 不纯的管道" 纯:假 ".这导致了数百MB的chrome中大量的内存使用,我不得不杀死这个进程.

如果还有其他方法吗？

谢谢!

Answer 1

您可以尝试的一种方法:

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

这样你就不会改变原始数组.这对于管道来说是件好事

也可以看看

• NgFor不使用Angular2中的Pipe更新数据
• 解开Angular 2书,第1章,例5

Answer 2

除非引用或值发生更改，否则纯管道不会运行。要解决此问题，请添加pure: false到您的管道装饰器中。见管道

前任。

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

编辑我没有看到 OP 已经这样做了。另一种选择是设置一个临时变量，然后将 jsonObject 分配给它，从而创建一个新的引用。你也可以尝试从 temp 到 jsonObject 的深拷贝