我正在尝试对列应用多个过滤器，但没有完成工作。我必须申请员工姓名、项目名称、开始日期和结束日期。下面是我的数据库表前端。帮我解决这个问题，我是角度材料的新手。期待帮助，并会感谢这个人。 在此示例中，我仅将逻辑应用于名称和项目，但出现错误。期待你们的友好回复

我的 html 文件看起来像。

<form [formGroup]="filterForm">
  <div mat-dialog-content class="filter__form">
    <mat-form-field>
      <input matInput class="form-group" formControlName="name" />
      <mat-placeholder>Employee Name </mat-placeholder>
    </mat-form-field>

    <mat-form-field>
      <input matInput class="form-group" formControlName="project" />
      <mat-placeholder>Project Name</mat-placeholder>
    </mat-form-field>

    <mat-form-field>
      <mat-label>Start Date:</mat-label>
      <input name="date_today" matInput [matDatepicker]="picker" />
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
      <mat-error>Pick up the date</mat-error>
    </mat-form-field>
    <mat-form-field>
      <mat-label>End Date:</mat-label>
      <input name="date_today" matInput [matDatepicker]="picker2" />
      <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
      <mat-datepicker #picker2></mat-datepicker>
      <mat-error>Pick up the date</mat-error>
    </mat-form-field>

    <button
      mat-raised-button
      type="submit"
      (click)="getFormsValue()"
      mat-button
      class="primary">
      Apply Filters
    </button>
  </div>
</form>

<table
  mat-table
  matTableFilter
  [dataSource]="dataSource"
  class="mat-elevation-z8"
>
  <!-- Position Column -->
  <ng-container matColumnDef="name" sticky>
    <th mat-header-cell *matHeaderCellDef><b>Employee Name:</b></th>
    <td mat-cell *matCellDef="let element">
      {{
        element.first_name + " " + element.middle_name + " " + element.last_name
      }}
    </td>
  </ng-container>

  <!-- Name Column -->
  <ng-container matColumnDef="hours">
    <th mat-header-cell *matHeaderCellDef><b>Hours Worked:</b></th>
    <td mat-cell *matCellDef="let element">{{ element.hours_worked }}</td>
  </ng-container>

  <!-- Name Column -->
  <ng-container matColumnDef="project">
    <th mat-header-cell *matHeaderCellDef><b>Project Name:</b></th>
    <td mat-cell *matCellDef="let element">{{ element.project_name }}</td>
  </ng-container>

  <!-- Name Column -->
  <ng-container matColumnDef="dated">
    <th mat-header-cell *matHeaderCellDef><b>Date:</b></th>
    <td mat-cell *matCellDef="let element">{{ element.date_today }}</td>
  </ng-container>

  <!-- Name Column -->
  <ng-container matColumnDef="summary" stickyEnd>
    <th mat-header-cell *matHeaderCellDef><b>Summary:</b></th>
    <td mat-cell *matCellDef="let element">{{ element.summary }}</td>
  </ng-container>

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

<mat-paginator [pageSizeOptions]="[5,10,20]"></mat-paginator>

我的 TS 文件是。

export class ReportPageComponent implements OnInit {
  userData: any = [];
  dataSource: any = [];

  employeeFilter = new FormControl();
  projectFilter = new FormControl();

  filteredValues = { employee: '',project: '' };
  displayedColumns: string[] = ['name','hours','project','summary','dated'];
  users: any = [];
  filteredValue: any = [];

  constructor(
    private userdataService: UserdataService,public nav: NavbarService
  ) {}

  @ViewChild(MatPaginator) paginator: MatPaginator | undefined;

  ngOnInit(): void {
    this.nav.show();
    this.getTableRecord();
  }

  getTableRecord() {
    this.userdataService.getReports().subscribe((data) => {
      this.userData = data;
      this.dataSource = new MatTableDataSource(this.userData.response);

      this.dataSource.paginator = this.paginator;
    });
  }

  // form group
  filterForm = new FormGroup({
    name: new FormControl(),project: new FormControl(),});

  get project() {
    return this.filterForm.get('project');
  }

  get name() {
    return this.filterForm.get('name');
  }

  isArray = function (a: { constructor: ArrayConstructor }) {
    return !!a && a.constructor === Array;
  };
  isObject = function (a: { constructor: ObjectConstructor }) {
    return !!a && a.constructor === Object;
  };

  getFormsValue() {
    const filterValues = {
      project: this.project.value,name: this.name.value,};

    this.dataSource.filterPredicate = (data,filter) => {
      let displayData = true;
      let myFilter = JSON.parse(filter);

      for (var key in myFilter) {
        if (myFilter[key]) {
          if (typeof myFilter[key] === 'string') {
            if (data[key] != myFilter[key]) {
              displayData = false;
            }
          }
          if (this.isArray(myFilter[key])) {
            if (!myFilter[key].includes(data[key])) {
              displayData = false;
            }
          }
        }
      }
      return displayData;
    };

    this.dataSource.filter = JSON.stringify(filterValues);
  }
}