AngularJS2管道过滤器后失去装订

Question

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

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

Plunker

我的管道代码：

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

模板代码：

ext_tables_static+adt.sql

由于 阿维

Answer 1

  

pipes分为两类：纯和不纯。

     

只有在检测到输入值的纯变化时，Angular才会执行纯管。纯变化是对原始输入值（String，Number，Boolean，Symbol）的更改或更改的对象引用（Date，Array，Function，   对象）。

     

Angular在每个组件更改检测周期内执行一个不纯的管道。一个不纯的管道将被调用很多，就像每次按键或鼠标移动一样。

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

使用不纯的管道

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

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