没有管道的过滤器Angular 6：压倒性问题

Question

我有两类过滤器：group和name。我该如何修改此代码，因为它们不能作为管道工作，它们是独立的，并且name过滤器会覆盖group过滤器，并向后。

.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

谢谢您的时间！

Answer 1

请检查下面的 app.component.ts ，无需进行其他转换登录。只需在此文件中添加 get 属性读取器“ filteredArray ”，就可以使用以下方法而无需使用管道。

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

下面对应的app.component.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 filteredArray">
            <td>{{user.name}}</td>
            <td>{{user.group}}</td>
        </tr>
    </tbody>
</table>

供参考，添加了嵌入式屏幕截图。

Answer 2

您正在使用new array或group创建users。

因此，我通过在两个事件上同时添加两个数组条件，对代码进行了一些更改。

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