AngularJS2 在管道过滤器后丢失绑定(bind)

Question

我正在尝试创建一个简单的 ngFor 来显示项目列表并使用管道对其进行过滤。

问题是，如果我使用管道删除一个项目，它会从数组中删除它，但显​​示不会更新。

Plunker

我的管道代码:

class MyFilterPipe {
   transform(list,remove){
      return list.filter((item)=>item.name != remove);
   }
}

模板代码:

<ul>
  <li *ngFor="#item of list |myFilter:'F' ">{{item.name}} <button  (click)="deleteMe(item)">Delete</button></li>
</ul>

谢谢视频

Answer 1

There are two categories of pipes: pure and impure.

Angular executes a pure pipe only when it detects a pure change to the input value. A pure change is either a change to a primitive input value (String, Number, Boolean, Symbol) or a changed object reference (Date, Array, Function, Object).

Angular executes an impure pipe during every component change detection cycle. An impure pipe will be called a lot, as often as every keystroke or mouse-move.

Slice 方法不会更改 list 数组的引用，因为您的管道是纯， Angular 不会执行管道，没有更新显示。

使用不纯管道

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

或在从中删除项目时更改 list 属性引用。