Angular material 自定义日期筛选器未返回任何内容

我是Angular的新手，一直在尝试为我的Mat表在createDate列上创建一个日期范围过滤器。当我点击filter按钮时，它只是填充一个空白表。筛选器的代码位于构造函数和datFil（）中。我试过几种不同的方法，但都没用。任何帮助都将不胜感激

打字机

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[];
  public begin: string;
  public end: string;
  private usersUrl = 'api/users';

  // public doFilter = (value: string) => {
  //   console.log("testing: " + value);

  //   this.dataSource.filter = value.trim().toLocaleLowerCase();
  // }


  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;

  storeFilter = new FormControl();
  poFilter = new FormControl();
  nameFilter = new FormControl();
  dateFilter = new FormControl();


  filteredValues = {
    name: '', distributor: '', storeNum: '',
    poNum: '', createDate: '', recDate: '', totalUnits: ''
  };




  constructor(private http: HttpClient, public dialog: MatDialog) {
    this.dataSource.filterPredicate = (data, filter) =>{
      if (this.begin && this.end) {
        return data.createDate >= this.fromDate && data.createDate <= this.toDate;
      }
      return true;
    }
  };


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

  ngOnInit() {
    this.pipe = new DatePipe('en');
    this.getUsers().subscribe(data => this.dataSource.data = data)
    this.dataSource.paginator = this.paginator;

    this.storeFilter.valueChanges.subscribe((storeFilterValue) => {
      this.filteredValues['storeNum'] = storeFilterValue;
      this.dataSource.filter = JSON.stringify(this.filteredValues);
    });

    this.poFilter.valueChanges.subscribe((poFilterValue) => {
      this.filteredValues['poNum'] = poFilterValue;
      this.dataSource.filter = JSON.stringify(this.filteredValues);
    });

    this.nameFilter.valueChanges.subscribe((nameFilterValue) => {
      this.filteredValues['name'] = nameFilterValue;
      this.dataSource.filter = JSON.stringify(this.filteredValues);
    });



    this.dataSource.filterPredicate = this.customFilterPredicate();
    console.log(this.dataSource);


  }


  dateFil(filter) {
    console.log(this.begin);
    console.log(this.end);
    this.dataSource.filter = ''+Math.random();

  }

从'@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'；
//公共doFilter=（值：字符串）=>{
//控制台日志（“测试：+值）；
//this.dataSource.filter=value.trim（）.toLocaleLowerCase（）；
// }
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；
storeFilter=newformcontrol（）；
poFilter=新表单控件（）；
nameFilter=newformcontrol（）；
dateFilter=新FormControl（）；
FilteredValue={
名称：“”，分发服务器：“”，storeNum：“”，
poNum:“”，createDate:“”，recDate:“”，totalUnits:“”
};
构造函数（私有http:HttpClient，公共对话框：MatDialog）{
this.dataSource.filterPredicate=（数据，过滤器）=>{
if（this.begin&&this.end）{
return data.createDate>=this.fromDate&&data.createDate this.dataSource.data=data）
this.dataSource.paginator=this.paginator；
this.storeFilter.valueChanges.subscribe（（storeFilterValue）=>{
this.filteredValues['storeNum']=storeFilterValue；
this.dataSource.filter=JSON.stringify（this.filteredValues）；
});
this.poFilter.valueChanges.subscribe（（poFilterValue）=>{
this.filteredValues['poNum']=poFilterValue；
this.dataSource.filter=JSON.stringify（this.filteredValues）；
});
this.nameFilter.valueChanges.subscribe（（nameFilterValue）=>{
this.filteredValues['name']=nameFilterValue；
this.dataSource.filter=JSON.stringify（this.filteredValues）；
});
this.dataSource.filterPredicate=this.customFilterPredicate（）；
console.log（this.dataSource）；
}
dateFil（过滤器）{
console.log（this.begin）；
console.log（this.end）；
this.dataSource.filter=''+Math.random（）；
}

HTML

- 
滤器

您可以像这样过滤数据源

 dateFil() {
   dataSource = new MatTableDataSource<User>(this.users.filter(x=>x.createDate>=this.begin && x.createDate<=this.end));
  }

dateFil（）{
dataSource=new MatTableDataSource（this.users.filter（x=>x.createDate>=this.begin&&x.createDate）返回一个错误，表示无法读取未定义的属性筛选器
 dateFil() {
   dataSource = new MatTableDataSource<User>(this.users.filter(x=>x.createDate>=this.begin && x.createDate<=this.end));
  }