带下拉菜单的Angular mat-table内联过滤器

<mat-form-field>
  <mat-label>Filter by Category</mat-label>
  <mat-select (selectionChange)="onFilterChange($event)">
    <mat-option *ngFor="let category of categories" [value]="category">
      {{ category }}
    </mat-option>
  </mat-select>
</mat-form-field>

<mat-table [dataSource]="dataSource">
  <!-- Define your columns here -->
</mat-table>

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

@Component({
  selector: 'app-data-table',
  templateUrl: './data-table.component.html',
  styleUrls: ['./data-table.component.css']
})
export class DataTableComponent {
  dataSource = new MatTableDataSource(yourDataArray);
  categories = ['Category1', 'Category2', 'Category3'];

  onFilterChange(event: any) {
    const selectedCategory = event.value;
    this.dataSource.filter = selectedCategory;
  }
}

ngOnInit() {
  this.categories = ['Category1', 'Category2', 'Category3'];
}

onFilterChange(event: any) {
  const selectedCategory = event.value;
  this.dataSource.filter = selectedCategory;
}

updateCategories(newCategories: string[]) {
  this.categories = newCategories;
}