Filters without pipe Angular 6: overriding problem

问题

I have 2 categories of filters: group and name. How can I modify this code because they are not working as a pipe, they are independent, and the name filter overrides group filter, and backward.

.ts

 changeGroup(event) {
   const group = event.target.value;
   const index = this.groupValue.indexOf(group);

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

   this.transform(this.usersList, 'group', this.groupValue)

   if (this.groupValue.length == 0) {
     this.transform(this.usersList, '', this.groupValue)
   }
 }

 changeUser(event) {
   const user = event.target.value;
   const index = this.userValue.indexOf(user);

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

   this.transform(this.usersList, 'name', this.userValue)

   if (this.userValue.length == 0) {
     this.transform(this.usersList, '', this.userValue)
   }
 }

 transform(items: any[], field: string, value: string[]): any[] {
   if (!items) {
     return [];
   }
   if (!field || !value || value.length <= 0) {
     return items
   }

   this.newArray = items.filter(singleItem => {
     return (singleItem != null && singleItem[field] != null && singleItem[field] != undefined && value.indexOf(singleItem[field]) >= 0);
   });

   return this.newArray
 }

.html

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

    <br>

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

    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Group</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let user of newArray">
          <td>{{user.name}}</td>
          <td>{{user.group}}</td>
        </tr>
      </tbody>
    </table>

Here is a working snippet

Thank you for your time!

回答1:

Please check the app.component.ts below no need of extra transforming login. just add a get property reader "filteredArray" in this file, You can use following approach without using pipe.

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

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

    groups = ['a', 'b', 'c']
    users = ['john', 'mike', 'doe', 'tim']

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

    newArray = []

    ngOnInit() {
        this.newArray = this.usersList.slice()
    }

    changeGroup(event) {
        const group = event.target.value;
        const index = this.groupValue.indexOf(group);

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

    changeUser(event) {
        const user = event.target.value;
        const index = this.userValue.indexOf(user);

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

    get filteredArray() {
        let arrayData = [];
        if (this.groupValue.length === 0 && this.userValue.length === 0) {
            return this.usersList;
        }

        return this.usersList.filter((user) => {

            return (this.userValue.length > 0 ? this.userValue.indexOf(user.name) !== -1 : true)
                && (this.groupValue.length > 0 ? this.groupValue.indexOf(user.group) !== -1 : true);
        })
    }
}

corresponding app.component.html code below.

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

<br>

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

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Group</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let user of filteredArray">
            <td>{{user.name}}</td>
            <td>{{user.group}}</td>
        </tr>
    </tbody>
</table>

for Reference added a inline screenshot.

回答2:

You were creating new array either with group or users.

So I have made some changes in your code by adding both array condition on both of the events.

https://stackblitz.com/edit/angular-regyev?file=src/app/app.component.ts

this.transform(this.usersList, 'group', this.groupValue);
this.transform(this.newArray, 'name', this.userValue);

if (this.groupValue.length == 0) {
  this.transform(this.usersList, '', this.groupValue);
  this.transform(this.newArray, '', this.userValue);
}

来源：https://stackoverflow.com/questions/53647384/filters-without-pipe-angular-6-overriding-problem