Почему фильтр клиента не работает в таблице угловых приложений

Question

Я реализовал таблицу материалов с функцией фильтрации клиентов, но она не работала.

код выглядит так:

<table mat-table [dataSource]="tableData" matSort>
    <ng-container matColumnDef="vin">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>
        <mat-form-field>
          <input matInput [formControl]="vinFilter" placeholder="Vin Filter" />
        </mat-form-field>
      </th>
      <td mat-cell *matCellDef="let row">
        <button (click)="searchByVin(row.vin)">{{ row.vin }}</button>
      </td>
    </ng-container>

    <ng-container matColumnDef="licensePlate">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>
        <mat-form-field>
          <input
            matInput
            [formControl]="licensePlateFilter"
            placeholder="License Plate Filter"
          />
        </mat-form-field>
      </th>
      <td mat-cell *matCellDef="let row">{{ row.licensePlate }}</td>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="status">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>
        <mat-form-field>
          <mat-select multiple placeholder="Status">
            <mat-option
              *ngFor="let selectFilterOption of selectFilterOptions"
              [(value)]="selectFilterOption"
            >
              {{ selectFilterOption }}
            </mat-option>
          </mat-select>
        </mat-form-field>
      </th>
      <td mat-cell *matCellDef="let row">
        <ng-container *ngIf="row.status === OverViewEntryStatus.SUCCESS">
          <div class="state-success">
            <mat-icon>done</mat-icon>
          </div>
          {{ row.status }}
        </ng-container>
        <ng-container *ngIf="row.status === OverViewEntryStatus.FAILURE">
          <div class="state-failure">
            <mat-icon>clear</mat-icon>
          </div>
          {{ row.status }}
        </ng-container>
        <ng-container *ngIf="row.status === OverViewEntryStatus.UNKNOWN">
          <div class="state-unknown">
            <mat-icon>clear</mat-icon>
          </div>
          {{ row.status }}
        </ng-container>
      </td>
    </ng-container>

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

файл ts:

import { OverViewEntryStatus } from "app/shared/enums/overview-entry-status";
import { Component, OnInit } from "@angular/core";
import { FormControl } from "@angular/forms";
import { MatTableDataSource } from "@angular/material";
import { CompanyService } from "@app/services/company.service:";
import * as _ from "underscore";
import { Router } from "@angular/router";

export interface AllVehicleOverview {
  vin: string;
  licensePlate: string;
  status: string;
}
@Component({
  selector: "app-all-fins-overview",
  templateUrl: "./all-fins-overview.component.html",
  styleUrls: ["./all-fins-overview.component.scss"],
})
export class AllFinsOverviewComponent implements OnInit {
  OverViewEntryStatus: typeof OverViewEntryStatus = OverViewEntryStatus;
  public isLoadingAllFinsOverviewData: boolean;
  tableData: any;
  displayedColumns: string[];
  selectFilterOptions: string[];
  vinFilter = new FormControl();
  licensePlateFilter = new FormControl();
  filteredValues = { vin: "", lisencePlat: "" };
  constructor(private companyService: CompanyService, private router: Router) {}

  ngOnInit() {
    this.tableData = new MatTableDataSource();
    this.loadAllFinsOverviewData();
    this.doFilter();
    this.tableData.filterPredicate = this.createFilter();
  }

  loadAllFinsOverviewData() {
this.tableData = DATA;
this.displayedColumns = _.keys(_.first(this.tableData));
        this.selectFilterOptions = this.getSelectOptionValues(data, "status");
  }

  doFilter() {
    this.vinFilter.valueChanges.subscribe(positionFilterValue => {
      this.filteredValues["vin"] = positionFilterValue;
      this.tableData.filter = JSON.stringify(this.filteredValues);
      this.tableData.filterPredicate = this.createFilter();
    });

    this.licensePlateFilter.valueChanges.subscribe(positionFilterValue => {
      this.filteredValues["licensePlate"] = positionFilterValue;
      this.tableData.filter = JSON.stringify(this.filteredValues);
      this.tableData.filterPredicate = this.createFilter();
    });
  }

  getSelectOptionValues(data, column) {
    let result: string[] = [];
    data.forEach(value => {
      result.push(value[column]);
    });

    return this.filterData(result);
  }

  filterData(data) {
    return data.reduce((x, y) => (x.includes(y) ? x : [...x, y]), []);
  }

  customFilter() {
    console.log("hier hier hier");
    const filterFunction = function(data, filter): boolean {
      console.log("hierasdasdaf");
      let searchString = JSON.parse(filter);
      return (
        data.vin
          .toString()
          .trim()
          .indexOf(searchString.vin) !== -1
      );
    };
    return filterFunction;
  }

  createFilter(): (data: any, filter: string) => boolean {
    let filterFunction = function(data, filter): boolean {
      let searchTerms = JSON.parse(filter);
      return (
        data.vin.toLowerCase().indexOf(searchTerms.name) !== -1 &&
        data.lisencePlat
          .toString()
          .toLowerCase()
          .indexOf(searchTerms.id) !== -1
      );
    };
    return filterFunction;
  }

  searchByVin(value) {
    sessionStorage.setItem("asdfa", value);
    this.router.navigate(["dashboard/overview"]);
  }
}

export const DATA = [{
vin: "test",
licensePlate: "test",
}]

Я не знаю, что не правильно. Я реализовал это на примере в интернете. Но не могу найти, что я не правильно сделал. Я несколько раз пытался связать функцию customerFilter, но при отладке она не была включена в эту функцию.

у вас есть какие-то решения?

С уважением,