过滤带下拉列表的角材料表

Question

我创建了一个角度表，我想基于特定列应用过滤器。我用mat-options定义了mat-select，但是问题是当我从下拉列表中选择数据时，数据消失了，没有任何过滤器。

这是我的标记

<div class="col-sm-4 col-md-4">
          <mat-form-field >
              <mat-select [(value)]="filterValue" placeholder="Type">
                <mat-option *ngFor="let type of types" [value]="type" (click)="applyFilter(type)">
                  {{type}}
                </mat-option>
              </mat-select>
            </mat-form-field>
      </div>

我写的typescrip

types = ["All", "Income","Expense"]

applyFilter(filterValue: string) {    
      this.dataSource.filter = filterValue.trim().toLowerCase();     
  }

我要在“类型”列（收入和支出）上进行过滤

我也想知道如何通过选择“全部”选项来检索所有数据

Answer 1

尝试

<div class="col-sm-4 col-md-4">
          <mat-form-field >
              <mat-select [(value)]="filterValue" placeholder="Type" (click)="applyFilter($event)">
                <mat-option *ngFor="let type of types" [value]="type" >
                  {{type}}
                </mat-option>
              </mat-select>
            </mat-form-field>
      </div>

和

applyFilter(event) {    
      this.dataSource.filter = event.value.toLowerCase();     
  }