在 selectionChange mat-select 上过滤 mat-table 的数据（级联过滤）答案

【问题标题】：Filter data of mat-table on selectionChange mat-select (cascaded filtering)在 selectionChange mat-select 上过滤 mat-table 的数据（级联过滤）
【发布时间】：2020-01-04 07:09:16
【问题描述】：

我有一个垫表，目前过滤输入数据。我有一个只有 2 个选项的 mat-select：活动和非活动。

// mat-select 的 html 代码，其中 status1 有 2 个值：活动和非活动

  <div style="width: 100%;">
  <div fxLayout="row" fxLayoutAlign="end center" style="padding: 15px 15px 
   0px 15px;">
   <mat-form-field>
    <mat-select placeholder="Select Status" 
    (selectionChange)="onselect($event)">
        <mat-option *ngFor="let item of status1" [value]="item.display"> 
   {{item.display}}</mat-option>

    </mat-select>
   </mat-form-field>
  </div>
 </div>

   // ts code
  status1: Status[] = [
  { value: '0', display: 'Active' },
  { value: '1', display: 'Inactive' }
  ];


 onselect(item: any) {
  this.accounts = this.jsonCustomerList.Accounts;
   this.dataSource.filter = item.trim().toLowerCase();
  }

  // object

     [ 
       {"AccountName": "range1",
      "State": "",
        "Zip": "",
        "Country": "",
        "IsDeleted": false},
          {"AccountName": "local1",
          "State": "",
        "Zip": "",
        "Country": "",
        "IsDeleted": true}
        ]

如果我选择 active ，mat-table 应该只显示 IsDeleted 的那些记录：true。反之亦然非活动即。 IsDeleted 的记录：false。

期待 ts 代码。

【问题讨论】：

标签： angular angular7

【解决方案1】：

你需要重写filterPredicate，照常使用，filterPredicate需要过滤通过时返回true，不通过时返回false

ngOnInit(){
   /* configure filter */
   this.dataSource.filterPredicate =
  (data: any, filter: string) => {
   if ('active'.includes(filter.toLowerCase())) {
      return data.IsDeleted;
    } else if ('inactive'.includes(filter.toLowerCase())) {
      return !data.IsDeleted;
    } else {
      if(data.AccountName.includes(filter.toLowerCase())){
        return true;
      }else{
        return false;
      }
    }
}

现在您可以轻松过滤数据源：

 onselect(item: any) {
     this.accounts = this.jsonCustomerList.Accounts;
     this.dataSource.filter = item.source.value.trim().toLowerCase();  //<--- Note this line
  }

工作演示链接here

【讨论】：