带有多个过滤器的角材料表

Question

我正在尝试实现两个过滤器，一个文本输入和一个日期范围。我无法弄清楚如何使用filterPredicate()和dataSource.filter使它们协同工作。我阅读了有关多个过滤器的其他主题，但不幸的是，它们没有帮助。

当前代码是这样：

.ts文件

  ngOnInit() {
    this.http.get('http://localhost:3000/data')
    .subscribe((data: Storico[]) => {
      this.dataSource = new MatTableDataSource<Storico>(data);
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;
    });
  }
  
  applyFilter(event: Event) {
    this.filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filterPredicate = function(data, filter: string): boolean {
      return data.nome_file.toLowerCase().includes(filter);
    };
    this.dataSource.filter = this.filterValue.trim().toLowerCase();
  }

  onValueChange(value: DatePipe): void {
    this.da = this.pipe.transform(value[0], 'yyyy/MM/dd');
    this.a = this.pipe.transform(value[1], 'yyyy/MM/dd');
    this.dataSource.filterPredicate = (data, filter) => {
      if (this.da && this.a) {
        return data.data >= this.da && data.data <= this.a;
      }
      return true;
    };
    this.dataSource.filter = "" + Math.random();
  }

.html文件

    <div class="row filters" style="margin-bottom: 10px;">
        <div class="col-5 d-flex align-items-center">
            <span style="font-size: 1rem; margin-right: 10px;">Nome file:</span>
            <input (keyup)="applyFilter($event)" placeholder="Inserisci il nome..." class="input-file">
        </div>
        <div class="col-7 d-flex justify-content-end align-items-center" style="padding: 0;">
            <span style="font-size: 1rem; margin-right: 2%;">Data:</span>
            <input type="text" placeholder="DA - A" class="form-control" bsDaterangepicker [(bsValue)]="newVar" (bsValueChange)="onValueChange($event)">
            <svg class="bi bi-x" tooltip="Annulla" (click)="removeFilter()" width="0.8em" height="0.8em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M11.854 4.146a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708-.708l7-7a.5.5 0 0 1 .708 0z"/>
                <path fill-rule="evenodd" d="M4.146 4.146a.5.5 0 0 0 0 .708l7 7a.5.5 0 0 0 .708-.708l-7-7a.5.5 0 0 0-.708 0z"/>
            </svg>
        </div>
    </div>

预先感谢