javascript - Angular 6 复选框过滤器覆盖之前的复选框

Question

我正在尝试使用复选框构建过滤器。下面是我的代码片段:

过滤器.pipe.ts

import { Pipe, PipeTransform, Injectable } from '@angular/core';

@Pipe({
  name: 'filter2'
})
@Injectable()
export class FilterPipe implements PipeTransform {
  transform(items: any[], field: string, value: string): any[] {
    if (!items) {
      return [];
    }
    if (!field || !value) {
      return items;
    }

    var newArray = [];
    items.filter(singleItem => {
      if (singleItem != null && singleItem[field] != null && singleItem[field] != undefined && singleItem[field].includes(value)) {
        newArray.push(singleItem);
      }
    })
    return newArray;
  }
}

app.html

<ng-container *ngFor="let group of groups;  let i=index">
     <label class="btn btn-filter" id="bttns">
            <input type="checkbox" name="customersGroupFilter" autoComplete="off" [value]="group" (change)="changeGroup($event)">
                      {{ group }}
     </label>&nbsp;
 </ng-container>

.....

 <tr *ngFor="let user of usersList | filter2: 'group' : groupValue">

.....

app.ts

groups = ['a', 'b', c']
usersList = [{'name': 'john', 'group': 'a'}, {'name': 'mike', 'group': 'a'}, {'name': 'doe', 'group': 'b'}, {'name': 'tim', 'group': 'c'}]
groupValue

changeGroup(event) {
    this.groupValue = event.target.value
}

这工作正常，但如果我想进行多次检查，新的复选框值将始终覆盖我以前的值，因此无法进行多重检查。

例如:

if I check group 'a' => it will return me john, mike

if I check 'a' and 'b' => it will return me only doe

如何修改我的代码来实现我想要的？感谢您的宝贵时间!

Answer 1

如果您确实想使用 Angular Pipe，这里是一个工作示例 https://stackblitz.com/edit/angular-qw7kkf

1. 您需要更改 Pipe 中的转换函数以支持多个组值

   transform(items: any[], field: string, value: string[]): any[] {
   if (!items) {
     return [];
   }
   if (!field || !value || value.length <= 0) {
     return items;
   }
   return items.filter(singleItem => {
     return (singleItem != null && singleItem[field] != null && singleItem[field] != undefined && value.indexOf(singleItem[field]) >= 0);
   });
   

   }

看到value的类型从string变成了string[]，还有Array.filter<的用法 函数

2.将groupValue的类型也从string更改为string[]。这是您的新 changeGroup() 函数

changeGroup(event) {
  const group = event.target.value;
  const index = this.groupValue.indexOf(group);
  if ( index < 0) {
    this.groupValue.push(group);
  } else {
    this.groupValue.splice(index, 1);  
  }
  const newGroupValue = [];
  newGroupValue.push.apply(newGroupValue, this.groupValue);
  this.groupValue = newGroupValue;
}

现在检查一个组也意味着在groupValue中触发它。请注意，我每次都必须为 this.groupValue 分配一个新数组，这是多么麻烦，因为如果不这样做，filter2 管道将无法检测到更改“内部”this.groupValue数组。这也是我不推荐 Pipe 用于您的使用场景的原因，对于 Angular Pipe 来说有点过了。