Angular 角度5表滤波

我有以下问题。我将创建一个表，通过Laravel后端提供的JSON获取数据。此表是角材质表。到目前为止，这是可行的。现在我想过滤结果，过滤器也会传递给对象。但变化并不明显。我做错了什么

这是我的HTML代码

<div>
  <mat-form-field>
    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
  </mat-form-field>
</div>
<mat-table [dataSource]='dataSource?.data'>

  <ng-container matColumnDef="barcode">
    <mat-header-cell *matHeaderCellDef>Barcode</mat-header-cell>
    <mat-cell *matCellDef="let items">{{items.barcode}}</mat-cell>
  </ng-container>

  <ng-container matColumnDef="name">
    <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
    <mat-cell *matCellDef="let items">{{items.name}}</mat-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>

</mat-table>

这是我的TS代码

export class TableComponent implements OnInit {

  constructor(public http: HttpClient) { }
  items: any;
  displayedColumns = ['barcode', 'name'];
  dataSource: any;
  ngOnInit() {
    this.items = this.getItems().subscribe((data) => {
      this.items = data;
      this.dataSource = new MatTableDataSource(this.items.items);
      console.log(this.dataSource.data);
    });


  }

  getItems() {
    return this.http.get('http://127.0.0.1:8000/api/items');

  }

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

export interface Item {
  id: number;
  barcode: string;
  name: string;
  description?: string;
  type?: any;
  room?: any;
  status?: any;
  annotation?: any;
  image?: any;
  lend?: any;
  manufactor?: any;
  created_at: Date;
  updated_at: Date;
}

它应该只是您的mat表上的数据源

<mat-table [dataSource]="dataSource">

---

完美：谢谢。

<mat-table [dataSource]="dataSource">