使用现有过滤器过滤 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="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;
   }
  }

}

Answer 1

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

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

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

旁注：我建议根据上下文命名变量。例如。 issue of issues 而不是 x of issues 和 TicketFilterPipe 而不是 FilterPipe，等等...

使用现有过滤器过滤 angular 中的多个列

Use existing filter to filter on multiple columns in angular

html-table

pipe

angular