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

Question

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

// html mat-select 的代码，其中 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}
        ]

if i select active ，mat-table 应该只显示 IsDeleted 的那些记录：true。反之亦然，即不活动。带有 IsDeleted 的记录：false。

期待 ts 代码。

Answer 1

您需要重写 filterPredicate，并像往常一样使用它，filterPredicate 需要 return 过滤器通过时为真，不通过时为假

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
  }

工作演示linkhere

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

Filter data of mat-table on selectionChange mat-select (cascaded filtering)

angular

angular7