手动触发管道更新

Question

我创建了一个能够*ngFor与对象一起使用的管道.但是,更新对象时,管道不会更新.我已经找到了解决办法在这里通过使用状态的管道pure: false.

对于我的用例,这个解决方案在性能方面是不可接受的,因为它会为每次更改刷新管道(我几乎到处都使用这个管道来渲染复杂的元素).

有没有办法触发管道的手动刷新,所以它只在我想要时刷新？

这是一个plunker - 要查看问题,请尝试通过单击-按钮删除名称.如果添加,pure:false您将看到它将起作用:

@Pipe({name: 'keys', pure: false})
export class Keys implements PipeTransform {
  transform(value, args:string[]) : any {
    let keys = [];
    for (let key in value) {
      keys.push({key: key, value: value[key]});
    }
    return keys;
  }
}

我想要的是在我的delName()函数中添加一些东西,以便更新管道......

Answer 1

使单向纯管道变得不纯是添加parameter到您的Pipe.

如果要刷新,只需更改参数即可.

没有参数的另一种方式

当输入具有新实例时,Pure Pipe将被触发.因此,对于TypeScript 2.1+,下面的代码将使用新实例复制原始对象,并引导纯粹的管道被触发.

let copy = { ...original }

这两种方式都包含在stackbliz演示中.

Answer 2

创建一个管道，这里有两种方法来解决它：

1，但是这种方式会被多次触发，对你的网站不好。

   @Pipe({
  name: 'tablepipe',
  pure: false
})

2.使用ngModel+纯管道

    <input 
                style="position: absolute;
                z-index: -1;"
                [(ngModel)]="detectedChangeRef">
this.detectedChangeRef = Math.random();

你的html，因为管道会注意到你的引用的变化，它会触发你的管道：

   *ngFor="let item1 of item | tablepipe:detectedChangeRef;">

你的烟斗

     transform(value,detectedChangeRef) {
    console.log(detectedChangeRef);
     // do sth..
}