没有管道 Angular 6 的过滤器：最重要的问题

Question

我有 2 类过滤器：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

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

所以我通过在两个事件上添加两个数组条件对您的代码进行了一些更改。

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