角度材料表过滤复杂对象数组数组

Question

我尝试通过使用 filterPredicate 覆盖表的默认过滤器来过滤嵌套网格，但它不起作用。

我尝试过的：

界面：

export interface ProductType {
    productTypeId: number;
    productTypeName: string;
    products: Product[];
}

export interface Product {
    productId: number;
    productName: string; 
}

.ts :

 ngOnInit() {
    this.ProductTypeDataSource = new MatTableDataSource(data);

    this.ProductTypeDataSource.filterPredicate = (data, filter) => {
    let valid = false;

    const transformedFilter = filter.trim().toLowerCase();

    Object.keys(data).map(key => {
    if (key === 'products' && data.products.filter(x => x.productName.toLowerCase() == transformedFilter)?.length > 0) {
      valid = true;
     }
    });

      return valid;
   };

 }

 applyFilter(filterValue: string) {
       filterValue = filterValue.trim();
       filterValue = filterValue.toLowerCase()    
       this.ProductTypeDataSource.filter = filterValue;    
 }

.htm

<mat-form-field>
  <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>
<table mat-table [dataSource]="productTypeDataSource" multiTemplateDataRows class="mat-elevation-z8">

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


  <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
  <ng-container matColumnDef="expandedDetail">
    <td mat-cell *matCellDef="let element" [attr.colspan]="productTypeDisplayedColumns.length"
      style="padding: 0px;">
      <div class="example-element-detail"
        [@detailExpand]="getStatusExpandDetail(element.productTypeId)?'expanded':'collapsed'">
        <div class="inner-table mat-elevation-z8">
          <!-- Product inner Table -->
          <table #innerTables mat-table [dataSource]="element.products" class="product-table">                
            <ng-container matColumnDef="productName">
              <td mat-cell *matCellDef="let element"> {{element['productName']}} </td>
            </ng-container>               
            <tr mat-row *matRowDef="let row; columns: productTypeDisplayedColumns;"></tr>
          </table>
        </div>
      </div>
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="productTypeDisplayedColumns"></tr>
  <tr mat-row *matRowDef="let element; columns: productTypeDisplayedColumns;" class="example-element-row"
    (click)="onClickRow(element.productTypeId)">
  </tr>
  <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
</table>

如何过滤嵌套的网格/产品？