带列值的材料表过滤器

Question

我希望能够按值搜索，在我过滤的那一刻，我可以按所有列过滤，我只想只搜索 3 个值

这是我当前的代码

<mat-form-field>
    <mat-label>Search ID</mat-label>
    <input  (keyup)="applySearch($event.target.value)" matInput placeholder="Filter" >
  </mat-form-field>
<table mat-table [dataSource]="certifications"   class="mat-elevation-z8">

    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef> ID </th>
      <td mat-cell *matCellDef="let cert"> {{ cert.num }} </td>
    </ng-container>
  

    <ng-container matColumnDef="NumO">
      <th mat-header-cell *matHeaderCellDef> NumO </th>
      <td mat-cell *matCellDef="let cert"> {{cert.NumO}} </td>
    </ng-container>
  

    <ng-container matColumnDef="Name">
      <th mat-header-cell *matHeaderCellDef> Name </th>
      <td mat-cell *matCellDef="let cert"> {{cert.Name}} </td>
    </ng-container>
  

    <ng-container matColumnDef="Unit">
      <th mat-header-cell *matHeaderCellDef> Symbol </th>
      <td mat-cell *matCellDef="let cert"> {{cert.Unit}} </td>
    </ng-container>


        <ng-container matColumnDef="State">
            <th mat-header-cell *matHeaderCellDef> State </th>
            <td mat-cell *matCellDef="let cert"> {{cert.State}} </td>
          </ng-container>
          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
        </table>
          <!-- YOU CAN CHANGE THE PAGE SIZE HERE -->
        <mat-paginator #paginator [pageSizeOptions]="[2, 4, 6]"   
      
      showFirstLastButtons></mat-paginator>
  

produits.component.ts

import { Component, OnInit,ViewChild } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Certification } from './produits';
import { ProduitService } from './produits.service'
import { MatPaginator } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';

@Component({
  selector: 'app-produits',
  templateUrl: './produits.component.html',
  styleUrls: ['./produits.component.scss'],
})
export class ProduitsComponent implements OnInit {
/* Declaration */
displayedColumns: string[] = [
  'num',
  'numO',
  'Name',
  'Unit',
  'State',
];
/* this code will help you to refresh pagination  */
private paginator: MatPaginator;
private sort: MatSort;
@ViewChild(MatSort, {
  static: false
}) set matSort(ms: MatSort) {
  this.sort = ms;
  this.setPaginationAndSort();
}
@ViewChild(MatPaginator, {
  static: false
}) set matPaginator(
  mp: MatPaginator
) {
  this.paginator = mp;
  this.setPaginationAndSort();
}
certifications: any = new MatTableDataSource([]);
constructor(public certService: ProduitService) {}
ngOnInit() {
  this.getCertification()
}

getCertification() {
  this.certService.getCertifications().subscribe(
    certifications => {
      this.certifications = new MatTableDataSource(certifications);
      this.setPaginationAndSort()
      console.log(this.certifications);
    }
  )
}
setPaginationAndSort() {
  this.certifications.paginator = this.paginator;
  this.certifications.sort = this.sort;
}
  applySearch(filterValue: string) {
    this.certifications.filter = filterValue.trim().toLowerCase();

  }

我想要实现的是为 NumO、State、Unit 设置 3 个过滤器。

我现在做的就是这样

 applySearch(filterValue: string) {
    
    this.certifications.filterPredicate = (data:
    {NumO: string}, filterValue: string) =>
    data.NumO.trim().toLowerCase().indexOf(filterValue) !== -1;
    console.log(filterValue);
    console.log(this.certifications.filter)
  }

这是静态的，仅适用于 NumO，我希望它有一个函数可以与我想要创建的 3 个搜索一起使用。