在Angular 6中的更多字段之后过滤管道

Question

I have this snippet that filters a list after more field.

If I check john and mike it will result:

0 - john, g1

1 - mike, g2

But if I check john , mike and g3 (which does not belong to any of these 2 users), because of pipe, it will search for g3 but there is no result:

How can I modify the code, if I check g3 not to result null , but remain the current filtered list?

Thank you for your time!

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>

filter.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

I forked your StackBlitz, let me know if it helped you: https://stackblitz.com/edit/angular-upjdc3

My modifications in the pipe:

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;
    }, []);
  }
}

And in the template :

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