如何过滤一个包含数组的mat-table？

import { Component } from '@angular/core';

@Component({
  selector: 'app-table',
  template: `
    <input type="text" [(ngModel)]="filterValue" (input)="applyFilter()" placeholder="Filter">
    <table mat-table [dataSource]="filteredData">
      <!-- 表格列定义 -->
      <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="tags">
        <th mat-header-cell *matHeaderCellDef>Tags</th>
        <td mat-cell *matCellDef="let element">{{ element.tags.join(', ') }}</td>
      </ng-container>
      <!-- 其他列定义... -->
      
      <!-- 表格行定义 -->
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
  `,
})
export class TableComponent {
  data = [
    { name: 'Item 1', tags: ['tag1', 'tag2'] },
    { name: 'Item 2', tags: ['tag2', 'tag3'] },
    { name: 'Item 3', tags: ['tag1', 'tag3'] },
    // 其他数据项...
  ];
  filteredData = this.data;
  displayedColumns = ['name', 'tags']; // 显示的列
  filterValue = '';

  applyFilter() {
    const filter = this.filterValue.trim().toLowerCase();
    this.filteredData = this.data.filter(item =>
      item.name.toLowerCase().includes(filter) ||
      item.tags.some(tag => tag.toLowerCase().includes(filter))
    );
  }
}