angular 4 filter属性'filter'在类型上不存在

Question

我试图对我的角度应用程序表数据应用过滤，虽然我已经声明过滤器变量它正在抛出错误

message: 'Property 'filter' does not exist on type 'WellDataSource'.'

下面是我的html和组件

HTML

<div>
  <div class="image"><img  [src]="header" ></div>

  <div class="w3-display-left">
  <nav>
     <li><a>My Wells</a></li>
      <li><a>Well Management</a></li>
      <li><a>Admin Tools</a></li>
  </nav>
  <div class="w3-display-right">
    <button mat-button>Reset</button>
    <button mat-button>Refresh</button>
    <button mat-button>View Wireline</button>
    <button mat-button>Chat</button>
    <button mat-button>View Seismic</button>
    <button mat-button>Alerts</button>

  </div>


  <br>
  <br>

   <div>
      <div class="example-header">
          <mat-form-field>
            <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Well/Wellbore">
          </mat-form-field>
        </div>

        <mat-table #table [dataSource]="dataSource" matSort>
    <!-- Active -->
    <ng-container matColumnDef="active">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Active </mat-header-cell>
      <mat-cell *matCellDef="let row"> {{row.active}} </mat-cell>
    </ng-container>

    <!-- Company -->
    <ng-container matColumnDef="company">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Company </mat-header-cell>
      <mat-cell *matCellDef="let row"> {{row.company}} </mat-cell>
    </ng-container>

    <!-- Country -->
    <ng-container matColumnDef="country">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Country</mat-header-cell>
      <mat-cell *matCellDef="let row"> {{row.country}} </mat-cell>
    </ng-container>

    <!-- Well -->
    <ng-container matColumnDef="well">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Well </mat-header-cell>
      <mat-cell *matCellDef="let row"> {{row.well}} </mat-cell>
    </ng-container>


        <!-- Wellbore -->
        <ng-container matColumnDef="wellbore">
          <mat-header-cell *matHeaderCellDef mat-sort-header> Wellbore </mat-header-cell>
          <mat-cell *matCellDef="let row"> {{row.wellbore}} </mat-cell>
        </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>
  <mat-paginator #paginator
  [length]="dataSource.renderData.length"
  [pageIndex]="0"
  [pageSize]="25"
  [pageSizeOptions]="[5, 10, 25, 100]">
</mat-paginator>
</div>
</div> 
<div>    

    </div>

组件：

    import { MatPaginator,MatSort,Sort } from '@angular/material';
import { DataSource } from '@angular/cdk/collections';
import { Component, OnInit,ViewChild,ChangeDetectorRef,ElementRef } from '@angular/core';
import { WellService } from '../services/well.service';
import { Well } from '../well/well';
import {  Observable  } from 'rxjs/Rx';
import { BehaviorSubject } from  'rxjs/BehaviorSubject';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/observable/merge';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/filter';


@Component({
  selector: 'app-well',
  templateUrl: './well.component.html',
  styleUrls: ['./well.component.css'],
  providers:[WellService]
})



export class WellComponent implements OnInit {
  title = 'Wells';
  header:string;  
  displayedColumns = ['active', 'company', 'country', 'well','wellbore'];
  public dataSource: WellDataSource | null;
  obs:any;

  @ViewChild(MatPaginator) paginator : MatPaginator;
  @ViewChild(MatSort) sort:MatSort;
  @ViewChild('filter') filter:ElementRef;

  applyFilter(filterValue: string) {
    filterValue = filterValue.trim(); // Remove whitespace
    filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
    this.dataSource.filter = filterValue;
  }
  constructor(private wellService:WellService) {

    this.header='assets/images/BHI_header_logo_bd.png'  

   }




   ngOnInit() {
    this.obs = this.wellService.getWells();
    this.dataSource = new WellDataSource(this.obs, this.paginator,this.sort);
    console.log(this.dataSource);

  }


  }

  export class WellDataSource extends DataSource<any> {
    _filterChange = new BehaviorSubject('');
    get filter(): string { return this._filterChange.value; }
    set filter(filter: string) { this._filterChange.next(filter); }

    finalData :any[]=[];
    renderData :any[]=[];



  constructor(private _obs: any, private _paginator: MatPaginator, private _sort:MatSort) {

    super();

  }

  connect(): Observable<any[]> {
    const displayDataChanges = [
      this._obs,
      this._paginator.page,
      this._sort.sortChange,
    ];

    return this._obs.flatMap(x => {
      return Observable.merge(...displayDataChanges).map(() => {
        const data = x.slice();
        this.renderData = data;

        const sortedData =this.sortData(data.slice());
        console.log(sortedData);
             console.log(data);
        console.log(this._obs);
        const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
        this.finalData=sortedData.splice(startIndex, this._paginator.pageSize);
        console.log(this.finalData);
        return this.finalData;
      });
    })
  }

    disconnect() {}


    sortData(data: any[]): any[] {
      if (!this._sort.active || this._sort.direction == '') { return data; }

      return data.sort((a, b) => {
        let propertyA: number|string = '';
        let propertyB: number|string = '';

        switch (this._sort.active) {
          case 'active': [propertyA, propertyB] = [a.active, b.active]; break;
          case 'company': [propertyA, propertyB] = [a.company, b.company]; break;
          case 'country': [propertyA, propertyB] = [a.country, b.country]; break;
          case 'well': [propertyA, propertyB] = [a.well, b.well]; break;
          case 'wellbore': [propertyA, propertyB] = [a.wellbore, b.wellbore]; break;
        }

        let valueA = isNaN(+propertyA) ? propertyA : +propertyA;
        let valueB = isNaN(+propertyB) ? propertyB : +propertyB;

        return (valueA < valueB ? -1 : 1) * (this._sort.direction == 'asc' ? 1 : -1);
      });
    }

  }

任何人都可以帮我解决这个问题，截至目前我完全陷入困境，无法前进，我正在使用Angular-material官方文档。