Question

我试图根据我的“项目”是否处于活动状态来过滤表。我目前有一个表，其中“活动”是一列，它会根据项目状态说是对还是错。我希望能够基于此布尔值过滤表。

所以我当前正在使用选择菜单，该菜单将根据选择返回true或false。从我的尝试，表不会筛选布尔值，仅对字符串。因此，我有一个过滤的谓词，它试图仅在我的活动列上强制进行过滤，但是目前无法按预期运行。

//.ts file
dataSource: MatTableDataSource<OrderTemplateInterfaceWithId> = new MatTableDataSource([]);
  displayedColumns = [
    'dayOfWeek',
    'startTime',
    'endTime',
    'technician',
    'frequency',
    'startDate',
    'endDate',
    'active',
    'actions'
  ];

ngOnInit() {
    this.dataSource.filterPredicate = (data: OrderTemplateInterfaceWithId, filter: string) => {
      return data.active === (filter === "true") || data.active === (filter === "false");
    };
  }

applyFilter(filterValue: string) {
    console.log(this.dataSource);
    this.dataSource.filter = filterValue;
  }

//.html file
<mat-form-field>
<mat-select (selectionChange)="applyFilter($event.value)">
  <mat-option value='true'>Active</mat-option>
  <mat-option value='false'>InActive</mat-option>
</mat-select>
</mat-form-field>

因此，我希望结果将基于我的选择菜单将表格按活动列过滤。任何帮助将不胜感激，谢谢！

Answer 1

因此，我想在实际过滤器之前必须将filterPredicate放入applyFilter中。所以我的applyFilter看起来像：

applyFilter(filterValue: string) {
    if(filterValue === 'all') {
      this.dataSource.filterPredicate = function(data, filter): boolean {
        return String(data.active).includes('true')
          || String(data.active).includes('false');
      };
    }
    else {
      this.dataSource.filterPredicate = function(data, filter): boolean {
        return String(data.active).includes(filter);
      };
    }
    this.dataSource.filter = filterValue;
  }

Answer 2

就这么简单

FilterPredicate定义

ngInit(){
    this.dataSource.filterPredicate = (data: any, filter: string) => !filter || data.checked == Boolean(filter);
}

过滤器功能是：

apllyfilter(){
    this.dataSource.filter = "true";
}

如何根据列的布尔值过滤此表？

2 个答案: