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

Question

我正在尝试根据我的“项目”是否处于活动状态来过滤表格。我目前有一个表，其中“活动”是一列，它会根据项目状态说真或假。我希望能够根据这个布尔值过滤我的表。

所以我目前正在使用一个选择菜单，它将根据选择返回真或假。从我一直在尝试的情况来看，该表不会过滤布尔值，只会过滤字符串。所以我有一个过滤的谓词，它试图只在我的活动列上强制过滤，但是它目前没有按预期工作。

//.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>

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

标签： angularangular-material

Answer 1

就这么简单：

过滤谓词定义

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

过滤功能为：

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