在具有列式过滤器的MatTable中应用全局过滤器的问题

Question

我创建了一个mat表，其中在全局过滤器旁边给出了列式过滤器。问题是两者无法一起工作。

如果我注释函数filterPredicate和tableFilter的代码，则全局过滤器正在工作，但列过滤器却无法工作，因为我已经注释了该行。

HTML代码：

    <mat-form-field>
          <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
        </mat-form-field>
    <mat-form-field>
            <input input matInput [formControl]="nameFilter" placeholder="Search Name">
        </mat-form-field>
        <mat-form-field>
            <input input matInput [formControl]="siteFilter" placeholder="Search Site Location">
        </mat-form-field>
        <mat-form-field>
            <input input matInput [formControl]="startdateFilter" placeholder="Search Start Date">
        </mat-form-field>
        <mat-form-field>
            <input input matInput [formControl]="enddateFilter" placeholder="Search End Date">
        </mat-form-field>
        <mat-form-field>
            <input input matInput [formControl]="statusFilter" placeholder="Search Status">
        </mat-form-field> 

TS代码：

    data = demo;
      tableData = table_data;
      nameFilter = new FormControl('');
      siteFilter = new FormControl('');
      startdateFilter = new FormControl('');
      enddateFilter = new FormControl('');
      statusFilter = new FormControl('');
      filterValues = {
        name: '',
        sitelocation: '',
        startdate: '',
        enddate: '',
        status: '',
        featured: '',
        default: ''
      };
      @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
      @ViewChild(MatSort, {static: true}) sort: MatSort;
      @ViewChild(MatPaginator, {static: true}) dataSource: MatTableDataSource<Element>;

        displayedColumns: string[] = ['name', 'sitelocation', 'startdate', 'enddate','status','featured','default'];
      constructor() {   
      }
      ngOnInit() {
        this.dataSource = new MatTableDataSource(this.data);
        this.dataSource.paginator = this.paginator;
        //this.dataSource.filterPredicate = this.tableFilter();
        // commented the above line to show that global filter is working without this
        this.dataSource.sort = this.sort;
        this.nameFilter.valueChanges
          .subscribe(
            name => {
              this.filterValues.name = name;
              this.dataSource.filter = JSON.stringify(this.filterValues);
            }
          )
          this.siteFilter.valueChanges
          .subscribe(
            sitelocation => {
              this.filterValues.sitelocation = sitelocation;
              this.dataSource.filter = JSON.stringify(this.filterValues);
            }
          )
          this.startdateFilter.valueChanges
          .subscribe(
            startdate => {
              this.filterValues.startdate = startdate;
              this.dataSource.filter = JSON.stringify(this.filterValues);
            }
          )
          this.enddateFilter.valueChanges
          .subscribe(
            enddate => {
              this.filterValues.enddate = enddate;
              this.dataSource.filter = JSON.stringify(this.filterValues);
            }
          )
          this.statusFilter.valueChanges
          .subscribe(
            status => {
              this.filterValues.status = status;
              this.dataSource.filter = JSON.stringify(this.filterValues);
            }
          )
          =
      }
    // commented the below line to show that global filter is working without this
      /*tableFilter(): (data: any, filter: string) => boolean {
        let filterFunction = function(data, filter): boolean {
          let searchTerms = JSON.parse(filter);
          return data.name.toLowerCase().indexOf(searchTerms.name) !== -1
            && data.sitelocation.toLowerCase().indexOf(searchTerms.sitelocation) !== -1
            && data.startdate.toLowerCase().indexOf(searchTerms.startdate) !== -1
            && data.enddate.toLowerCase().indexOf(searchTerms.enddate) !== -1
            && data.status.toLowerCase().indexOf(searchTerms.status) !== -1
            && data.featured.toLowerCase().indexOf(searchTerms.featured) !== -1
        }
        return filterFunction;
      }*/

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

当上面的代码被注释时，我不知道为什么这个applyfilter起作用的原因，而不是因为没有调用给定的函数而没有注释时，为什么不起作用。

当我在搜索过滤器中键入字符时，浏览器控制台中显示的错误是：

Browser console