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

Question

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

问题是，如果我使用管道删除了一个项目，它确实将其从数组中删除，但显示没有更新。

柱塞

我的管道代码：

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

管道有两类：纯管道和不纯管道。

Angular 仅在检测到输入值的纯变化时才执行纯管道。纯粹的更改要么是对原始输入值（字符串，数字，布尔值，符号）的更改，要么是对象引用的更改（日期，数组，函数，对象）。

Angular在每个组件更改检测周期内执行不纯管道。每次击键或移动鼠标时，不纯净的管道都会被频繁调用。

Slice方法不更改list数组的引用，因为您的管道是pure，所以angular 不执行管道，也不会更新任何显示。

使用不洁的管道

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

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