使用现有过滤器以角度过滤多个列答案

【问题标题】：Use existing filter to filter on multiple columns in angular使用现有过滤器以角度过滤多个列
【发布时间】：2021-09-05 10:15:58
【问题描述】：

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

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="hwdashboard-table">
                                    <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;
   }
  }

}

【问题讨论】：

标签： angular html-table pipe

【解决方案1】：

您也可以将一个对象传递给您的管道。像这样的：

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

您的管道中的input 将包含该值，您可以全部使用它们。

附注：我建议根据上下文命名变量。例如。 issue of issues 代替 x of issues 和 TicketFilterPipe 代替 FilterPipe 等...

【讨论】：