如何使用列值筛选材料表数据源数据，例如在MS Excel中排序

Question

过滤器材料表数据源数据具有按列选择，例如在MS Excel中进行排序。这是代码

过滤器材料表数据源数据具有按列选择，例如在MS Excel中进行排序。这是代码筛选材料表数据源数据具有按列选择，例如在MS Excel中进行排序。这是代码

HTML：

<mat-form-field>
  <mat-select placeholder="filter" [formControl]="customers" multiple>
    <mat-option *ngFor="let filter of CustomersList" [value]="customers">{{customers}}</mat-option>
  </mat-select>
</mat-form-field>
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef> ID </th>
    <td mat-cell *matCellDef="let element"> {{element.id}} </td>
  </ng-container>

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

  <ng-container matColumnDef="role">
    <th mat-header-cell *matHeaderCellDef> Role </th>
    <td mat-cell *matCellDef="let element"> {{element.role}} </td>
  </ng-container>

   <ng-container matColumnDef="subscription">
    <th mat-header-cell *matHeaderCellDef> Subscription </th>
    <td mat-cell *matCellDef="let element"> {{element.subscription}} </td>
  </ng-container> 

  <ng-container matColumnDef="status">
    <th mat-header-cell *matHeaderCellDef> Status </th>
    <td mat-cell *matCellDef="let element"> {{element.status}} </td>
  </ng-container>

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

</table>
--------------------
TS

 export class customers {
 id:number;
  name:string;
  role :string;
  subscription :string;
  status :string;
}
customers = new FormControl();
displayedColumns: string[] = ['id', 'name', 'role','subscription','status'];
dataSource;
constructor() {
this.CustomersList = [];
this.customers.push({id:1, name: 'Abc', role:'Admin', subscription: 'new', status: 'Active'});
this.customers.push({id:2, name: 'bcd', role:'Admin', subscription: 'Trail', status: 'Active'});
this.customers.push({id:3, name: 'Cde', role:'Staff', subscription: 'Old', status: 'Expired'});
this.customers.push({id:4, name: 'Def', role:'Staff', subscription: 'Old', status: 'Active'});
this.customers.push({id:5, name: 'Efg', role:'Admin', subscription: 'new', status: 'Expired'});
this.customers.push({id:6, name: 'Fgh', role:'Admin', subscription: 'Trail', status: 'Active'});
this.customers.push({id:7, name: 'Ghi', role:'Staff', subscription: 'new', status: 'Expired'});
this.customers.push({id:8, name: 'Hij', role:'Staff', subscription: 'new', status: 'Expired'});
this.customers.push({id:9, name: 'Jkl', role:'Admin', subscription: 'Trail', status: 'Active'});
this.dataSource = new MatTableDataSource(this.customers);
}

Answer 1

看看mat-table-filter。

它简化了复杂的过滤要求。

简单数组的数据源将不起作用。为了使用matTableFilter，必须将表的数据源创建为MatTableDataSource，请参见下面的示例。

dataSource = new MatTableDataSource(ELEMENT_DATA);

将matTableFilter指令作为属性添加到材质表。

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

与表中的项目保持相同类型的示例对象。将exampleObject绑定到matTableFilter指令的exampleEntity属性]

<table mat-table matTableFilter [dataSource]="dataSource" [exampleEntity]="exampleObject"...>
就这些。当您填充exampleObject的属性时，在默认的防反跳支持下，过滤器将自动正常运行。您也可以更改反跳时间。

Stackblitz演示mat-table-filter-example