Question

我包括一个管道，可以从列表中单独搜索多个项目。问题是我只能搜索一项，而我想将其用于多个项。

我尝试包括两个搜索词，并添加了两个输入元素，分别为1st（[ngModel]）=“ searchTerm”和2nd（[ngModel]）=“ searchTerm2”（请检查代码）。但是，它不起作用，并且即使我将searchTerm的拼写更改为诸如searchTerm1或searchTrm之类的内容，也无法正常工作，并且不会搜索/过滤eve前一项。

我的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和EventName项目。

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

我在代码中包含了第二个搜索词；

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

现在它被检测到了。

是否可以使用过滤器管道搜索两个或多个项目？

2 个答案: