错误无法在 Angular 材质中设置未定义的属性“filterPredicate”

Question

我正在对表实现过滤功能，并且在调试时遇到以下错误。

core.js:6228 ERROR TypeError: Cannot set property 'filterPredicate' of undefined
    at new IssuedLicenseListComponent

已经声明了listData，它是一个MatTableDataSource，它具有filterPredicate 属性，这可能是什么问题？

型号

export interface LicenseIssued {
  issue_date: Date;
  valid_from: Date;
  expiry_date: Date;
  amount_paid: any;
  receipt_no: any;

}

这是组件中的代码

.....
  listData: MatTableDataSource<LicenseIssued>;

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

  constructor(
    private apiService: ApiService,
    private dialog: MatDialog,
    private spinner: NgxSpinnerService,
    private dataService: DataService,
    private route: Router,

    ) {

      this.pipe = new DatePipe('en');
      this.listData.filterPredicate = (data, filter) =>{
        if (this.fromDate && this.toDate) {

          console.log('filtered')
          console.log(data)
          console.log(data.issue_date)
          return data.issue_date >= this.fromDate && data.issue_date <= this.toDate;
        }
        return true;
      }


    }

  ngOnInit() {

    this.getAllIssuedLicenses();

    /** spinner starts on init **/

    this.spinner.show();
    /** spinner starts afer 5 secs**/
    setTimeout(() => {
      this.spinner.hide();

    }, 7000);
  }


  getAllIssuedLicenses() {
    this.liquorService.getAllIssuedLicenses().subscribe(
      res => {
        console.log(res)
        this.listData = new MatTableDataSource(res.data);
      },

      error => {
        console.log(error);
      }
    );

    this.listData.sort = this.sort;

    const sortState: Sort = {active: 'id', direction: 'desc'};
    this.sort.active = sortState.active;
    this.sort.direction = sortState.direction;
    this.sort.sortChange.emit(sortState);

    this.listData.paginator = this.paginator;
  }

   applyFilter() {
    this.listData.filter = ''+Math.random();
  }

Answer 1

如下声明listData。

listData = new MatTableDataSource();