简体   繁体   English

过滤 Angular 材料表与下拉

[英]Filter Angular Material Table with Dropdown

I have created an angular table and i want to apply filter based on a specific column.我创建了一个 angular 表,我想根据特定列应用过滤器。 i have defined mat-select with mat-options but the problem is when i select from a dropdown data disappears and nothing filters.我已经用 mat-options 定义了 mat-select 但问题是当我从下拉数据中的 select 消失并且没有过滤器时。

here is my markup这是我的标记

<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>

in typescrip i have written在我写的打字稿中

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

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

here i want to filter on Type column (Income and Expense)在这里我想过滤类型列(收入和费用)

在此处输入图像描述

and also i want to know how to how to retrieve all data by selectin "All" option而且我想知道如何通过选择“全部”选项来检索所有数据在此处输入图像描述

Try this尝试这个

<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>

and

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM