Angular 带有角度API调用表的日期范围筛选器

我正在尝试将日期范围过滤器应用到我的角度表中。 我的表中的数据是从API加载的。 由于某些原因，我没有收到任何错误，所有内容都打印到控制台上，但过滤器不起作用，它只是在我单击“提交”后返回一个空表

接口：

    account_id: number;
    doctype: number;
    company: string;
    issue_date: Date;
    total: number;
    currency_id?: string;
    docDetailes:[{
            name: string;
            iItem: number;
            iTotal: number;
            qty: number;
        }
    ],

Sale.ts：

resp;
  ELEMENT_DATA: SaleByCustomer[] = [];
  displayedColumns: string[] = ['account_id','doctype','company','issue_date','total','currency_id','name', 'iItem', 'iTotal','qty'];
  dataSource = new MatTableDataSource<SaleByCustomer>(this.ELEMENT_DATA);
  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
  pipe: DatePipe;


  filterForm = new FormGroup({
    fromDate: new FormControl(),
    toDate: new FormControl(),
});

get fromDate() { return this.filterForm.get('fromDate'); }
get toDate() { return this.filterForm.get('toDate'); }

  constructor(private saleService: SaleService) {
    this.pipe = new DatePipe('en-IL');
    console.log(this.dataSource.filterPredicate);
    const defaultPredicate=this.dataSource.filterPredicate;
    this.dataSource.filterPredicate = (data, filter) =>{
      const formatted=this.pipe.transform(data.issue_date,'MM/dd/yyyy');
      return formatted.indexOf(filter) >= 0 || defaultPredicate(data,filter) ;
    }
  }

  getDateRange(value) {
    this.dataSource = new MatTableDataSource<SaleByCustomer>(this.ELEMENT_DATA);
    // getting date from calendar
    const fromDate = value.fromDate;
    const toDate = value.toDate;
    this.dataSource.data = this.dataSource.data.filter(e=>e.issue_date > fromDate && e.issue_date < toDate );
    console.log(fromDate, toDate);
  }

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

  ngAfterViewInit() {
    this.resp = this.saleService.getSale().subscribe(
      data => {
        this.dataSource = new MatTableDataSource<SaleByCustomer>(data.body as SaleByCustomer[]);
        this.dataSource.paginator = this.paginator;
        console.log(this.dataSource);
      }
    )
  }
}

resp；
元素_数据：SaleByCustomer[]=[]；
显示的列：字符串[]=['account\u id'、'doctype'、'company'、'issue\u date'、'total'、'currency\u id'、'name'、'iItem'、'iTotal'、'qty']；
dataSource=新MatTableDataSource（this.ELEMENT_DATA）；
@ViewChild（MatPaginator，{static:true}）paginator:MatPaginator；
管道：DatePipe；
filterForm=新表单组({
fromDate:new FormControl（），
toDate:新建FormControl（），
});
get-fromDate（）{返回this.FilterPerform.get（'fromDate'）；}
get toDate（）{返回this.filtermber.get（'toDate'）；}
构造函数（私有SalesService:SalesService）{
this.pipe=new DatePipe（'en-IL'）；
log（this.dataSource.filterPredicate）；
const defaultPredicate=this.dataSource.filterPredicate；
this.dataSource.filterPredicate=（数据，过滤器）=>{
const formatted=this.pipe.transform（data.issue_date，'MM/dd/yyyy'）；
返回格式化的.indexOf（filter）>=0 | | defaultPredicate（数据，过滤器）；
}
}
getDateRange（值）{
this.dataSource=新MatTableDataSource（this.ELEMENT_DATA）；
//从日历中获取日期
const fromDate=value.fromDate；
const toDate=value.toDate；
this.dataSource.data=this.dataSource.data.filter（e=>e.issue\u date>fromDate&&e.issue\u date{
this.dataSource=新MatTableDataSource（data.body作为SaleByCustomer[]）；
this.dataSource.paginator=this.paginator；
console.log（this.dataSource）；
}
)
}
}

Sale.html（由于代码限制，我只上传表中的两列）

提交
公司
{{element.company}}
发行日期
{{element.issue_date}日期：'dd/MM/yyyy'}

有人能帮我吗？ 多谢各位

<form class="date-block" [formGroup]="filterForm">
            <div class="date-block__list">
            <mat-form-field>
              <input matInput 
                [matDatepicker]="fromDate" 
                placeholder="From Date" 
                formControlName="fromDate">
              <mat-datepicker-toggle matSuffix [for]="fromDate"></mat-datepicker-toggle>
              <mat-datepicker #fromDate></mat-datepicker>
            </mat-form-field>
          </div>
              <div class="date-block__list">
            <mat-form-field>
              <input matInput 
                [matDatepicker]="toDate" 
                placeholder="To Date" 
                formControlName="toDate">
              <mat-datepicker-toggle matSuffix [for]="toDate"></mat-datepicker-toggle>
              <mat-datepicker #toDate></mat-datepicker>
            </mat-form-field>
          </div>
           <button mat-button color="primary" class="primary" (click)="getDateRange(filterForm.value)">Submit</button>
        </form>
        
        <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
        
          <ng-container matColumnDef="company">
            <th mat-header-cell *matHeaderCellDef> company </th>
            <td mat-cell *matCellDef="let element"> {{element.company}} </td>
          </ng-container>
        
          <ng-container matColumnDef="issue_date">
            <th mat-header-cell *matHeaderCellDef> Issue Date </th>
            <td mat-cell *matCellDef="let element"> {{element.issue_date | date: 'dd/MM/yyyy'}} </td>
          </ng-container>
        
          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
        </table>
        <mat-paginator [pageSize]="5" [pageSizeOptions]="[5, 10, 25, 100]">
        </mat-paginator>