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 等...

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

1 个答案: