有没有办法使用管道过滤器来搜索两个或多个项目？

Question

我包括管道从列表中逐个搜索多个项目。问题是，我可以搜索只有一个项目，而我想用它为一个以上的项目。

我试图包括两个搜索项并加到两个输入元素与第一（[ngModel]）= “SEARCHTERM”，＆第二（[ngModel]）= “searchTerm2”（请检查代码）。但是它没有工作，和即使我改变SEARCHTERM的拼写像searchTerm1或searchTrm任何东西，它没有工作和夏娃的主项不搜索/过滤。

我的HTML代码;

<div class="container">
<h1 class="text-center">Student List</h1>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 hidden-sm hidden-xs"  
style="background-color: #5BC0DE;padding: 10px;">
<!-- Search Function -->
<div class="inner-addon right-addon pull-left col-lg-6 col-md-6 col-sm-12 
col-xs-12" style="margin: auto">
    <div class="col-lg-6">
      <i class="glyphicon glyphicon-search" style="color:#BB9999; right: 
10px;"></i>
      <input class="form-control" [(ngModel)]="searchTerm" 
[ngModelOptions]="{standalone: true}" placeholder="search by Organisation"
      name="fname">
    </div>
    <div class="col-lg-6">
      <i class="glyphicon glyphicon-search" style="color:#BB9999; right: 
  10px;"></i>
      <input class="form-control" [(ngModel)]="searchTerms" 
 [ngModelOptions]="{standalone: true}" placeholder="search by Event"
        name="fname">
    </div>
  </div>

  <div class="pull-right form-inline  col-lg-6 col-md-6 col-sm-12 col-xs- 
12">
    <form>
      <div class="form-group">
        <label for="startDate" style="color:#333; margin-right: 5px;">List 
From</label>  
        <input class="form-control" id="sd" style="margin:auto 5px;" 
type="date" [(ngModel)]="startDate" [ngModelOptions]="{standalone: true}"> 
      </div>
      <div class="form-group">
        <label for="endDate" style="color:#333">To</label> 
        <input class="form-control" id="ed" style="margin:auto 5px;" 
type="date" [(ngModel)]="endDate" [ngModelOptions]="{standalone: true}">  
      </div>
      <button type="button" class="btn btn-primary" 
(click)="sortByDateDiff()">Search</button>
    </form>
  </div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="padding: 0px;">
 <!-- Fetching Event List from Server. -->
 <div class="table-responsive" style="margin: 1% 0 3%;">
  <table class="table table-striped table-bordered table-hover">
    <thead>
      <tr>
        <th>Organisation Name </th>
        <th>Event Name</th>
        <th>Student ID</th>
        <th>First Name</th>
        <th>Contact No.</th>
        <th>Email</th>
        <th>Current Education</th>
        <th>Current Institution</th>
        <th>Preferred Country</th>
        <th>Registration Date</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let students of studentList | reverse | 
 filterStudentList: searchTerm | paginate: {itemsPerPage: 10, currentPage: 
 p}"
        id="students">
        <td>{{students.OrganisationName}}</td>
        <td>{{students.EventName}}</td>
        <td>{{students.StudID}}</td>
        <td>{{students.FirstName}}</td>
        <td>{{students.Contact}}</td>
        <td>{{students.EmailID1}}</td>
        <td>{{students.CurrentEdu}}</td>
        <td>{{students.CurrentInstitution}}</td>
        <td>{{students.PreferredCountry}}</td>
        <td>{{students.RegistrationDate}}</td>
      </tr>
      <tr>
        <td colspan="10">
          <pagination-controls (pageChange)="p = $event"></pagination- 
controls>
        </td>
      </tr>
    </tbody>
  </table>
</div>
  </div>
</div>

我的滤水管;

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

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

transform(studentListxyz: any[], searchTerm: string, searchTerm2: string): 
any[] {
 if (!studentListxyz|| !searchTerm && !searchTerm2) {
  return studentListxyz;
 } else if(searchTerm) {
  return studentListxyz.filter(item =>
    item.OrganisationName.toLowerCase().indexOf(searchTerm.toLowerCase()) 
 !== -1);
 } 
  return studentListxyz.filter(item =>
  item.EventName.toLowerCase().indexOf(searchTerm2.toLowerCase()) !== -1); 

 }

}

我想到的解决方案应当管道过滤器工作过滤两种，OrganisationName和事件名称的项目。

Answer 1

问题是，你的代码将只考虑通过组织名称过滤的第一个参数，即使你你有两个参数。由于其他条件将满足和返回值将结束指令执行流程。

看看这个未经测试的代码，把握我的意思的想法：

if (!studentListxyz || !(searchTerm || searchTerm2)) {
  return studentListxyz;
 } else if(searchTerm || searchTerm2) {
  return studentListxyz.filter(item => {
    if (searchTerm && searchTerm2) {
        return  item.OrganisationName.toLowerCase() === searchTerm.toLowerCase() &&
                item.EventName.toLowerCase() === searchTerm2.toLowerCase();
    } else if (searchTerm) {
        return  item.OrganisationName.toLowerCase() === searchTerm.toLowerCase();
    } else {
        return item.EventName.toLowerCase() === searchTerm2.toLowerCase();
    }
  }
}

Answer 2

我包含在代码中的第2个搜索项;

<tr *ngFor="let students of studentList | reverse | filterStudentList: searchTerm : searchTerm2 | paginate: {itemsPerPage: 10, currentPage: p}"
        id="students

现在，它是越来越检测。