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;
  }
}

应用程序.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">

.....

应用程序.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
}

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

例如。：

如果我检查组 'a' => 它会返回我约翰，迈克

如果我检查 'a' 和 'b' => 它只会返回我

如何修改我的代码以实现我想要的？感谢您的时间！

标签： javascripthtmlangularfilter

Answer 1

你在做一些错误的事情。首先，您不应该使用过滤管道。该过滤器每秒会被调用多次，并且可能会减慢您的应用程序的速度。相反，在单击复选框时运行过滤器功能。

changeGroup(event) {
    // filter function here
}

让我眼前一亮的第二件事是过滤器的滥用。Array.filter()为您过滤数组 - if 语句必须是回调的返回值

this.newArray =  items.filter(singleItem => 
  singleItem != null && singleItem[field] != null && singleItem[field] != undefined && singleItem[field].includes(value)
)

然后你可以使用 newArray...

所以你以前过滤的 userList 变成

<tr *ngFor="let user of newArray">