Question

我正在尝试使用复选框过滤我拥有的表，但到目前为止我尝试过的所有方法均无效。

这是我的桌子样品：

 <mat-table [dataSource]="dataSource"  [hidden]="!show" matSort >
    <!-- Location  -->
    <ng-container matColumnDef="AITOR">
      <mat-header-cell *matHeaderCellDef> Location </mat-header-cell>
      <mat-cell *matCellDef="let container"> {{container.AITOR}} </mat-cell>
    </ng-container>
        <!-- Type  -->
        <ng-container matColumnDef="SOG_MCOLH">
          <mat-header-cell *matHeaderCellDef mat-sort-header > Container Type </mat-header-cell>
          <mat-cell *matCellDef="let container"> {{container.SOG_MCOLH}} </mat-cell>
        </ng-container>

这是我的复选框的外观：

<input  class="CheckBoxClass" type="checkbox" value="RG" (onclick)="doFilter(RG)" >
<mdb-icon class="IconClass" fas icon="tint"></mdb-icon>
RG<br>

这是我的组件中使用的功能：

public doFilter = (value: string) => {
  this.dataSource.filter = value.trim().toLocaleLowerCase();
}

我尝试使用[checked]代替（onclick）都不起作用。我曾经尝试过使用Pipe，但是我并不太了解它以及应该如何编写。我尝试过在线寻找解决方案，但是没人在做复选框过滤器。

Answer 1

我找到了解决方法-

您需要创建自定义filterPredicate才能使用checkbox进行过滤。

这是我的代码段，其中包含新的filterPredicate和html：

HTML：

<div class="CheckBoxStyle">
<mat-checkbox  class="CheckBoxClass" value="RG" (change)="addFilter($event)">RG</mat-checkbox>
<mdb-icon class="IconClass" fas icon="tint"></mdb-icon>
</div>

组件-filterPredicate和method并使用它的observes：

ngOnInit() {
  this.marinService.getAllContainers().subscribe((result)=>{
    this.dataSource = new MatTableDataSource(result);
    this.total = this.dataSource.length;

    this.dataSource.filterPredicate = (data: Container, filter: any) => {
      return filter.split(',').every((item: any) => data.SOG_MCOLH.indexOf(item) !== -1);
    };
    this.filterCheckboxes.subscribe((newFilterValue: any[]) => {
      this.dataSource.filter = newFilterValue.join(',');
        });
    )}        
  }

addFilter(change: MatCheckboxChange) {
  if (this.filterCheckboxes.value.some((a: any) => a === change.source.value)) {
    this.filterCheckboxes.next(this.filterCheckboxes.value.filter((a: any) => a !== change.source.value));
  } else {
    this.filterCheckboxes.next(this.filterCheckboxes.value.concat(change.source.value));
  }
}

这是使用复选框过滤对我有用的datatable的解决方案。

如何使用复选框过滤角度8中的垫子表

1 个答案: