如何在Angular Material Table中精确匹配select中的过滤器字符串数据？

<mat-table [dataSource]="dataSource">
  <!-- 其他列定义 -->
  
  <!-- 添加select过滤器 -->
  <ng-container matColumnDef="filter">
    <mat-header-cell *matHeaderCellDef>
      <mat-form-field>
        <mat-select [(value)]="selectedFilter">
          <mat-option value="option1">Option 1</mat-option>
          <mat-option value="option2">Option 2</mat-option>
          <mat-option value="option3">Option 3</mat-option>
        </mat-select>
      </mat-form-field>
    </mat-header-cell>
    <mat-cell *matCellDef="let element">{{ element.filter }}</mat-cell>
  </ng-container>
  
  <!-- 其他列定义 -->
  
  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

import { Component, OnInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css']
})
export class TableComponent implements OnInit {
  dataSource = new MatTableDataSource<any>([
    { name: 'John', filter: 'option1' },
    { name: 'Jane', filter: 'option2' },
    { name: 'Mike', filter: 'option3' },
  ]);
  displayedColumns = ['name', 'filter'];
  selectedFilter: string;

  constructor() { }

  ngOnInit() {
    this.dataSource.filterPredicate = this.customFilterPredicate;
  }

  customFilterPredicate(data: any, filter: string): boolean {
    return data.filter === filter;
  }
}

<mat-form-field>
  <mat-select [(value)]="selectedFilter" (selectionChange)="dataSource.filter = selectedFilter">
    <mat-option value="option1">Option 1</mat-option>
    <mat-option value="option2">Option 2</mat-option>
    <mat-option value="option3">Option 3</mat-option>
  </mat-select>
</mat-form-field>

<mat-table [dataSource]="dataSource">
  <!-- 列定义 -->
</mat-table>