角度材料垫表在单列上应用多个复选框过滤器，然后进一步搜索

npm install @angular/material @angular/cdk

import { Component } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { MatCheckboxChange } from '@angular/material/checkbox';

@Component({
  selector: 'app-filter-table',
  templateUrl: './filter-table.component.html',
  styleUrls: ['./filter-table.component.css']
})
export class FilterTableComponent {
  dataSource = new MatTableDataSource<any>(DATA); // 数据源
  displayedColumns: string[] = ['name', 'age', 'gender']; // 表格列名
  filters: any = {}; // 过滤器对象

  applyFilter(column: string, event: MatCheckboxChange) {
    if (event.checked) {
      this.filters[column] = true;
    } else {
      delete this.filters[column];
    }
    this.dataSource.filter = JSON.stringify(this.filters);
  }
}

<mat-checkbox (change)="applyFilter('name', $event)">Name</mat-checkbox>
<mat-checkbox (change)="applyFilter('age', $event)">Age</mat-checkbox>
<mat-checkbox (change)="applyFilter('gender', $event)">Gender</mat-checkbox>

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef>Name</th>
    <td mat-cell *matCellDef="let element">{{element.name}}</td>
  </ng-container>

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

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

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>