在mat-table上过滤不起作用

使用DataSource成功构建并显示带有Angular的md表 . 但是当我尝试添加过滤器时，它会说 filter does not exist on type "Account Data Source" . 下面是我的帐号list.component.js只是想知道我可能做错了什么？我需要在别处添加过滤器吗？

import { Component, OnInit, Inject } from '@angular/core';
import { AccountService, ACCOUNT_SERVICE_TOKEN } from '../shared/account.service';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/filter';
import { DataSource } from '@angular/cdk/collections';
import { Account } from '../shared/account';


@Component({
  templateUrl: './account-list.component.html',
  styleUrls: ['./account-list.component.scss']
})
export class AccountListComponent implements OnInit {

  dataSource = new AccountDataSource(this.accountService);
  displayedColumns = ['id', 'name', 'date', 'manager'];
  //here is where I am adding the filter as described by the angular material docs
  applyFilter(filterValue: string) {
    filterValue = filterValue.trim(); // Remove whitespace
    filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
    this.dataSource.filter = filterValue;
  }
  accounts: Account[];
  constructor(@Inject(ACCOUNT_SERVICE_TOKEN) private accountService: AccountService) { }

  ngOnInit() {

  }
}
export class AccountDataSource extends DataSource<any> {
  constructor(private accountService: AccountService) {
    super();
  }

  connect(): Observable<Account[]> {
    return this.accountService.list();
  }

  disconnect() {}
}

这是我的依赖和devdepen：

"dependencies": {
    "@angular/animations": "^5.0.0",
    "@angular/cdk": "^5.0.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/flex-layout": "^2.0.0-beta.12",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/material": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "material-design-icons": "^3.0.1",
    "rxjs": "^5.5.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.6.1",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/language-service": "^5.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "~2.4.2"