Question

我有一个mat-table，目前可以过滤输入数据。我有一个只有2个选择的垫选择：活动和不活动。

//用于mat-select的html代码，其中status1具有2个值：active和inactive

  <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代码。

Answer 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

选择时过滤垫表数据更改垫选择（级联过滤）

1 个答案: