Angular 根据复选框值过滤 table

Question

我正在尝试根据复选框的值过滤我的 table，过滤器应该可以通过下拉列表显示所有行、复选框被选中的行以及选中的行未选中复选框。我试过 :

<tr *ngFor="let step of steps | tableFilter: checked"></tr>

但我无法让它工作。我在这里举例说明： https://stackblitz.com/edit/angular-fwnnzf-penyen?embed=1&file=app/table-basic-example.html 谢谢！

Answer 1

您必须根据选择过滤 table 数据，您可以通过传递数据和选择值来完成此操作，例如

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'tableFilter'
})
export class TableFilterPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    console.log(args , 's' , value)
    if(args === 'Checked'){
        return value.filter(x=>x.checked)
    }else if(args === 'NotChecked'){
         return value.filter(x=>!x.checked)
    }else{
      return value
    }
  }

}

这是一个工作模型 https://stackblitz.com/edit/angular-5wb7ig?embed=1&file=app/table-selection-example.html

Angular 根据复选框值过滤 table

Angular filter table on checkbox value

html

angular

angular-material-table