需要将lisftilter用于多个字段

Question

因此，我有一个用于根据患者名字过滤患者的过滤器。但是我真正想做的是重用同一过滤器，以用户的中间名，姓氏和电子邮件过滤用户。我不想创建另一个过滤器，我希望用户能够在同一输入框中键入用户的名字，中间名，姓氏或电子邮件地址来过滤记录。我严格使用Angular 7和TypeScript 3 +。

我尝试使用||在模板中链接要过滤的字段（即名字，中间名，姓氏等）。而且不起作用。我不是一名高级棱角开发人员，所以我将非常感谢您的帮助。

Patient-list.component.ts

export class PatientListComponent implements OnInit {
  pageTitle = 'Patient List';
  errorMessage = '';

  _listFilter = '';
  get listFilter(): string {
    return this._listFilter;
  }
  set listFilter(value: string) {
    this._listFilter = value;
    this.filteredPatients = this.listFilter ? 
this.performFilter(this.listFilter) : this.patients;
  }

  filteredPatients: Patient[] = [];
  patients: Patient[] = [];

  constructor(private patientService: PatientService,
              private route: ActivatedRoute) { }

  ngOnInit(): void {
    this.listFilter = this.route.snapshot.queryParamMap.get('filterBy') 
|| '';

    this.patientService.getPatients().subscribe(
      patients => {
        this.patients = patients;
        this.filteredPatients = this.performFilter(this.listFilter);
      },
      error => this.errorMessage = <any>error
    );
  }

  performFilter(filterBy: string): Patient[] {
    filterBy = filterBy.toLocaleLowerCase();
    return this.patients.filter((patient: Patient) =>
       patient.firstName.toLocaleLowerCase().indexOf(filterBy) !== -1);
  } 
}

patient-list.component.html

<div class="card">
  <div class="card-header">
    {{pageTitle}}
  </div>

  <div class="card-body">
    <div class="row">
      <div class="col-md-2">Filter by:</div>
      <div class="col-md-4">
        <input type="text"
               [(ngModel)]="listFilter" />
      </div>
    </div>
    <div class="row"
         *ngIf="listFilter">
      <div class="col-md-6">
        <h4>Filtered by: {{listFilter}}</h4>
      </div>
    </div>

    <div class="row">
    <button class="btn btn-outline-primary btn-sm"
                      [routerLink]="['/patients', 0, 'edit']">
                Add
              </button>
    </div>

    <div class="table-responsive">
      <table class="table mb-0"
             *ngIf="patients && patients.length">
        <thead>
          <tr>
            <th>First Name</th>
            <th>Middle Name</th>
            <th>Last Name</th>
            <th>Email</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let patient of filteredPatients">
            <td>
              <a [routerLink]="[patient.id]"
                 [queryParams]="{filterBy: listFilter}">
                {{ patient.firstName }}
               </a>
            </td>
            <td>
                <a [routerLink]="[patient.id]"
                   [queryParams]="{filterBy: listFilter}">
                {{ patient.middleName }}
             </a>
            </td>
              <!-- {{ patient.middleName }}</td> -->
            <td>{{ patient.lastName }}</td>
            <td>{{ patient.email }}</td>
             <td>
              <button class="btn btn-outline-primary btn-sm"
                      [routerLink]="[patient.id, 'edit']">
                 Edit
              </button>
            </td>
          </tr>
         </tbody>
       </table>
     </div>

  </div>
</div>
<button class="btn btn-outline-secondary mr-3"
            style="width:80px"
            type="button"
            title="Cancel your edits"
            [routerLink]="['/welcome']">
      Cancel
    </button>

<div *ngIf="errorMessage"
 class="alert alert-danger">

错误：{{errorMessage}}     

它默默地失败了...