angular - 使用现有过滤器以 Angular 过滤多列

Question

所以我正在使用过滤器，我的问题是我让过滤器在单个列上工作，我如何使用这个现有的过滤器来搜索多个列。我是 Angular 新手，无法集中注意力这任何指导都会很有帮助

HTML

<input type="text" placeholder="Enter INC to search" class="float-right mt-4 mr-4 form-control w-20" [(ngModel)]="searchQuery" (ngModelChange)="searchtable('issues', issues)">

<table class="table" id="someID">
                                    <thead>
                                        <tr>
                                            <th>id</th>
                                            <th>name</th>
                                            <th>Domain</th>
                                            <th>age</th>
                                            <th>date</th>
                                            
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr *ngFor="let x of issues | FilterPipe: ticketNumber ">
      
                                            <td>{{ x.id}}</td>
                                            <td>{{ x.name }}</td>
                                            <td>{{ x.age }}</td>
                                            <td>{{ x.type }}</td>
                                            <td>{{ x.phone }}</td>
                                            <td>{{ x.date }}</td>

                                        </tr>
                                    </tbody>
                                </table>

ts 文件

 public searchtable(type, data) {
    if (this.searchQuery === "") {
      this.isSearching = false;
      if (type === "requests") {
        this.requests = this.allRequests;
      } else if (type === "issues") {
        this.issues = this.allIssues;
      }
    } else {
      this.isSearching = true;
      if (type === "requests") {
        this.requests = this.allRequests.filter(res => {
          return res.id.toLocaleLowerCase().match(this.searchQuery.toLocaleLowerCase());
        });
      } else if (type === "issues") {
        this.issues = this.allIssues.filter(res => {
          return res.id.toLocaleLowerCase().match(this.searchQuery.toLocaleLowerCase());
        });
      }
    }
  }

pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'FilterPipe'
})
export class FilterPipe implements PipeTransform {

  transform(value: any, input: any): any {
   if (input) {
     return value.filter(val => val.toLowerCase().indexOf(input.toLowerCase()) >= 0);
   } else {
     return value;
   }
  }

}

Answer 1

您还可以将对象传递到管道。像这样的事情:

<div *ngFor="let x of issues | FilterPipe: {ticketNumber, someKey: someValue}">
  {{x | json}}
</div>

管道中的

input 将包含这些值，您可以使用它们。

旁注:我建议根据上下文命名变量。例如。 问题的问题而不是x的问题和TicketFilterPipe而不是FilterPipe，等等...