Angular 2 - 更改对象时不会刷新带有键管道的 *ngFor

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();，没有变化
• 不纯管道“纯：假”。这导致 chrome 使用了数百 MB 的大量内存，我不得不终止该进程。

还有其他方法吗？

谢谢！

Answer 1

您可以尝试的一种方法：

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

这样您就不会改变原始数组。这对管道至关重要

另见

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

Answer 2

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

例如

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

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