如何使用多个复选框来过滤Angular 2中的数据

Question

我正在使用Angular 2创建一个过滤器页面.数据将根据选中的复选框进行过滤.

这是HTML

    <input required type="checkbox" name="checkbox" value="value1" (change)="toggleFilter(kind.value)" #kind/>
    Filter option 1

    <input required type="checkbox" name="checkbox" value="value2" (change)="toggleFilter(kind2.value)" #kind2 />
    Filter option 2

    <input required type="checkbox" name="checkbox" value="value3" (change)="toggleFilter(kind3.value)" #kind3 />
    Filter option 3


<div *ngFor="let item of (items | FilterPipe: filterFormat)">
    {{item.id}} {{item-title}}
</div>

这是我的Item组件的一部分.在toggleFilter()i中filterOptions,使用复选框的值来填充数组.在get filterFormat()返回所填充的阵列,并把它作为一个参数Filterpipe(其位于HTML)

filterOptions: [] = [];

toggleFilter(value: any) {

    let index = this.filterOptions.indexOf(value);

    if (index > -1) {
      this.filterOptions.splice(index, 1);
    } else {
      this.filterOptions.push(value);
    }

    return this.filterOptions;
}

get filterFormat() {
   console.log('call filterFormat');
   return this.filterOptions.map(res => res);
}

如何使用复选框作为管道参数来过滤数据？