javascript - Angular 6 中更多字段后的过滤管道

Question

I have this snippet在更多字段之后过滤列表。

如果我检查john和mike，结果会是:

0 - john, g1

1 - mike, g2

但是如果我检查 john、mike 和 g3 (不属于这两个用户中的任何一个)，由于管道的原因，它将搜索 g3 但没有结果:

如果我检查 g3 不返回 null，但保留当前过滤列表，我该如何修改代码？

感谢您的宝贵时间!

app.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';

  users = [
    { 'id': '0', 'name': 'john', 'group': 'g1' },
    { 'id': '1', 'name': 'mike', 'group': 'g2' },
    { 'id': '2', 'name': 'anne', 'group': 'g3' },
    { 'id': '3', 'name': 'dan', 'group': 'g1' },
    { 'id': '4', 'name': 'zoe', 'group': 'g2' },
  ]
  groupValue: string[] = []
  userValue: string[] = []

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

  changeUser(event) {
    const user = event.target.value;
    const index = this.userValue.indexOf(user);
    if (index < 0) {
      this.userValue.push(user);
    } else {
      this.userValue.splice(index, 1);
    }
    const newUserValue = [];
    newUserValue.push.apply(newUserValue, this.userValue);
    this.userValue = newUserValue;
  }
}

app.html

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

<br>

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

<pre>You select groups {{ userValue | json }} {{ groupValue | json }}</pre>
 <div *ngFor="let user of users | filter2 : 'name' : userValue | filter2 : 'group' : groupValue">
   {{ user.id }} - {{ user.name }}, {{ user.group }}
  </div>

过滤器.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 || value.length <= 0) {
      return items;
    }
    return items.filter(singleItem => {
      return (singleItem != null && singleItem[field] != null &&  singleItem[field] != undefined && value.indexOf(singleItem[field]) >= 0);
    });
  }
}

Answer 1

我 fork 了你的 StackBlitz，请告诉我它是否对你有帮助:https://stackblitz.com/edit/angular-upjdc3

我在管道中的修改:

export class FilterPipe implements PipeTransform {
  transform(items: any[], filters:{[key: string]: string}): any[] {
    return items.reduce((accumulator, currentValue) => {
      for(let field in filters) {
        if(filters[field].includes(currentValue[field]) && !accumulator.includes(currentValue)) {
          return accumulator.concat([currentValue]);
        }
      }
      return accumulator;
    }, []);
  }
}

在模板中:

<div *ngFor="let user of users | filter2 :  {'name' : userValue, 'group' : groupValue }">