過濾 Angular 材料表與下拉

Question

我創建了一個 angular 表，我想根據特定列應用過濾器。 我已經用 mat-options 定義了 mat-select 但問題是當我從下拉數據中的 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>

在我寫的打字稿中

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();     
  }