Angular 日期范围筛选不填充表格角度材质

我正在尝试根据所选的日期范围筛选表，当我点击提交按钮时，表为空，并且控制台日志中没有筛选的数据。我尝试过几种不同的方法，但都没有成功。我还有一个搜索过滤器可以工作，直到我放入dataSource.filter=''+Math.random（）。任何帮助都将不胜感激

TS

从'@angular/core'导入{Component，OnInit，ViewChild}；
从'@angular/common/http'导入{HttpClient，HttpHeaders}；
从“rxjs”导入{Observable}；
从'@angular/material/sort'导入{MatSort}；
从'@angular/material/paginator'导入{MatPaginator}；
从“@angular/material/table”导入{MatTableDataSource}；
从“@angular/material”导入{MatDialog，MatDialogConfig}；
从“./dialog data/dialog data.component”导入{DialogDataComponent}；
从“@angular/common”导入{DatePipe}；
从'@angular/forms'导入{FormControl，FormGroup}；
导出接口用户{
id：编号；
名称：字符串；
分配器：字符串；
storeNum：数字；
poNum：数字；
createDate：日期；
记录日期：日期；
总数单位：个数；
}
@组成部分({
选择器：“应用程序顺序表”，
templateUrl:'./order table.component.html'，
样式URL:['./订单表.component.scss']
})
导出类OrderTableComponent实现OnInit{
[x:字符串]：任意；
公共用户：用户[]；
private usersUrl='api/users'；
displayedColumns:string[]=['name'，'distributor'，'storeNum'，'poNum'，'createDate'，'recDate'，'totalUnits']；
管道：DatePipe；
dataSource=新MatTableDataSource（this.users）；
@ViewChild（MatPaginator，{static:false}）paginator:MatPaginator；
@ViewChild（MatSort，{static:true}）sort:MatSort；
filterForm=新表单组({
fromDate:new FormControl（），
toDate:新建FormControl（），
});
get-fromDate（）{返回this.FiltPerform.get（'fromDate'）.value；}
get-toDate（）{返回this.FilterPerform.get（'toDate'）.value；}
构造函数（私有http:HttpClient，公共对话框：MatDialog）{}；
ngAfterViewInit（）{
this.dataSource.paginator=this.paginator；
this.dataSource.sort=this.sort；
}
恩戈尼尼特（）{
this.getUsers（）.subscribe（数据=>this.dataSource.data=data）
this.dataSource.paginator=this.paginator；
console.log（this.dataSource）；
}
getUsers（）：可观察{
返回this.http.get（this.usersUrl）
}
openDialog（）：void{
const dialogRef=this.dialog.open（DialogDataComponent，new MatDialogConfig（））
}
onNoClick（）：void{
this.dialogRef.close（）；
}
applyFilter（搜索：字符串，开始：日期，结束：日期）{
this.dataSource.filter=search.trim（）；
this.pipe=new DatePipe（'en'）；
this.dataSource.filterPredicate=（数据，过滤器）=>{
如果（开始和结束）{
//1.需要确定为什么过滤后的数据不会推送到表中
return data.createDate>=start&&data.createDate
import { Component, OnInit, ViewChild } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import { MatSort} from '@angular/material/sort';
import {MatPaginator} from '@angular/material/paginator';
import {MatTableDataSource} from '@angular/material/table';
import { MatDialog, MatDialogConfig } from '@angular/material';
import { DialogDataComponent } from "../dialog-data/dialog-data.component";
import { DatePipe } from '@angular/common';
import {FormControl, FormGroup} from '@angular/forms';


export interface User {
  id: number;
  name: string;
  distributor: string;
  storeNum: number;
  poNum: number;
  createDate: Date;
  recDate: Date;
  totalUnits: number;
}


@Component({
  selector: 'app-order-table',
  templateUrl: './order-table.component.html',
  styleUrls: ['./order-table.component.scss']
})
export class OrderTableComponent implements OnInit{
  [x: string]: any;
  public users: User[];

  private usersUrl = 'api/users';


  displayedColumns: string[] = ['name', 'distributor', 'storeNum', 'poNum', 'createDate', 'recDate', 'totalUnits'];
  pipe: DatePipe;
  dataSource = new MatTableDataSource<User>(this.users);


  @ViewChild(MatPaginator, {static: false}) paginator: MatPaginator;
  @ViewChild(MatSort, {static: true}) sort: MatSort;

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

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

  constructor(private http: HttpClient, public dialog: MatDialog) {};


  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

  ngOnInit() {
    this.getUsers().subscribe(data => this.dataSource.data = data)
    this.dataSource.paginator = this.paginator;
    console.log(this.dataSource);


  }

  getUsers(): Observable<User[]> {
    return this.http.get<User[]>(this.usersUrl)

  }

  openDialog(): void {
    const dialogRef = this.dialog.open(DialogDataComponent, new MatDialogConfig())
  }

  onNoClick(): void {
    this.dialogRef.close();
  }

  applyFilter(search: string, start: Date, end: Date) {

    this.dataSource.filter = search.trim().toLocaleLowerCase();
    this.pipe = new DatePipe('en');
    this.dataSource.filterPredicate = (data, filter) =>{

      if (start && end) {
        //1. Need to determine why filtered data wont push to the table
        return data.createDate >= start && data.createDate <= end;

      }
      return true;
    }
    //2. Need to determine what is being filtered/filter value
    this.dataSource.filter= ''+Math.random();
}
}