Angular 如何使用多个复选框创建用于过滤的自定义管道？角度4

我有一个状态列表，其值为： 发送、打开和关闭。当我点击复选框时，我想过滤结果

<ion-item *ngFor="let s of appointmentStatus" >
  <ion-checkbox [(ngModel)]="s.checked" (click)="updateFilter(s)"></ion-checkbox>
  <ion-label >{{ s.status }}</ion-label>
</ion-item>

<div *ngFor="let a of todaysAppointments>
//list of appointments goes here

{{s.status}}
编辑：

因为我们处理的是两个数组，所以这里是转换为管道的原始答案，而不仅仅是在组件文件中使用filter方法

如果您想在此处添加或删除筛选器值，我们还可以保留
updateFilter
方法，或者您可以在click事件的模板中执行此操作：

(click)="s.checked ? 
    filterArr.push(s.status) : filterArr.splice(filterArr.indexOf(s.status), 1)

我个人喜欢在组件中使用这种逻辑来保持模板干净，但这完全取决于您：）

在模板中，我们将该数组传递给管道：



管道看起来像这样，其中
values
是要筛选的数组，
args
是选中复选框的数组。（您需要重新考虑命名）。我们必须使管道不纯，以便在发生变化时将其烧掉

@Pipe（{name:'filterPipe'，pure:false}）
导出类MyPipe实现PipeTransform{
转换（值：any，args？：any[]）：any[]{
返回值=值。过滤器（a=>{
返回args.length？args.indexOf（a.status）！=-1:值；
})      
}
}

那就够了



原始答案：

也许这里根本不需要定制管道。您只需在单击事件中使用

此外，我们还需要检查复选框是否选中，并根据选中的值进行筛选。我在这里将它们插入了一个单独的数组，
filterArr

因此，在
updateFilter（s）
方法中，我们首先进行检查，将该过滤器值推送到数组中，或者删除它。然后按值筛选，如果
filterArr
为空，则返回所有约会：

我们有一个单独的数组，用于存储名为
allappoints
的所有约会，从中我们将值过滤到
todasyappoints

updateFilter（应用程序）{
如果（附件已选中）{
//选中复选框后，按至filterArr
此.filterArr.push（应用程序状态）
}
否则{
//未选中的框，让我们将其从数组中移除
让index=this.filterArr.indexOf（appt.status）
此.filterArr.splice（索引，1）
}
//按filterArr中设置的值筛选，如果为空，则返回所有约会
this.todaysappoints=this.allappoints.filter（a=>{
返回此.filterArr.length？
this.filterArr.indexOf（a.status）！=-1:this.allappoints；
})
}

工作完美！非常感谢。我确实漏掉了一个细节，你能帮我吗？我有两个部分。今天和现在。这会一次过滤掉所有的内容，并且不过滤我的日期。有没有办法让我的约会保持过滤状态？我编辑了上面的内容。很高兴听到它起作用了。至于你的后续行动。。。我想我明白你的意思。快速解决方案是首先过滤日期，然后用我提供的上述代码重新过滤。很难看。但我很难将这些代码拼凑在一起，因为我看不到整个画面，只有几个代码片段，甚至不知道你的应用程序中到底发生了什么。我道歉。我已经编辑了我的代码，让它更清晰一点。没问题。谢谢你的帮助：）！Cody，我更新了答案并将代码转换为管道，而不是在组件中使用方法：）希望现在对您有效：）
<h2 style="background-color:#387ef5">Today's Appointments</h2>
<div *ngFor="let a of todaysAppointments | filter: searchTerm" (click)="openPage(a)">

<h2 style="background-color:#387ef5">Upcoming Appointments</h2>
<div *ngFor="let a of upcomingAppointments | filter: searchTerm" (click)="openPage(a)">

(click)="s.checked ? 
    filterArr.push(s.status) : filterArr.splice(filterArr.indexOf(s.status), 1)