当我加载有关服务的数据时，mat-table 中的过滤器不起作用

Question

我通过服务调用数据并将其传送到我的 mat-table。我想过滤它们。不幸的是我的代码不起作用。错误在哪里？你能帮帮我吗？

我的代码：

 <div class="filter-header">
   <mat-form-field class="filter-input">
     <label>
       <input matInput #filter (keyup)="applyFilter($event.target.value)" placeholder="Durchsuchen" />
      </label>
      <button mat-icon-button matSuffix aria-label="clear" *ngIf="filter.value" (click)="filter.value=''; applyFilter('');">x
      </button>
    </mat-form-field>
  </div>

export class TableBasicExample {
  displayedColumns: string[] = ['id', 'userId', 'title', 'completed'];
  
  public dataSource: MatTableDataSource<Data> = null;

  // Overview of the ViewChilds
  @ViewChild('filter', {static: true}) filter: ElementRef;
  @ViewChild('tableWrapper', {static: true}) tableWrapper: ElementRef;

  constructor(private service : APIServiceService){
    this.service.getData().subscribe(data => {
      this.dataSource = data;
    });
  }

  // Filter
  public applyFilter(filterValue: string) {
    filterValue = filterValue.trim();
    filterValue = filterValue.toLowerCase();
    this.dataSource.filter = filterValue;
    console.log(filterValue.lastIndexOf);
  }

  public cancelFilter() {
    this.dataSource.filter = '';
    this.filter.nativeElement.value = '';
  }

}

我在 Stackblitz

中的工作

Answer 1

您必须创建新的 MatTableDataSource。

更新以下行即可解决问题

this.dataSource = new MatTableDataSource(data);

而不是

this.dataSource = data.

更新了stackblitz

当我加载有关服务的数据时，mat-table 中的过滤器不起作用

Filter in mat-table does not work when I load data about a service

typescript

angular-material

angular

mat-table