Question

我有一个要过滤的Mat-Table。我有1组checkboxes的相同变量有效。但是当我想添加另一个集合时，它不会按它们过滤表，因为它似乎仍在同一列上进行搜索。

这是我的组件ngOnInit：

  ngOnInit() {
    this.marinService.getAllContainers().subscribe((result) => {
     //Data
      this.dataSource = new MatTableDataSource(result);
      //Paginator
      this.dataSource.paginator = this.paginator;
      //AutoFilter Form 1st page
      this.clientType = this.route.snapshot.queryParamMap.get('clientType');
      this.storageType= this.route.snapshot.queryParamMap.get('storageTypes');
      console.log('The Client name is : '+this.clientType+'  '+'The storage Facility is : '+this.storageType);
      //snapShot CheckBox Filter
      this.dataSource.filterPredicate = (paramData: Container, paramFilter: any) => {
        return paramFilter.split(',').every((itemParam: any) => paramData.LQOCH_SHM_LOEZI_QTSR.indexOf(itemParam) !== -1);
      };
      this.filterParamasBoxes.subscribe((newFilterValue: any[]) => {
        this.dataSource.filter = newFilterValue.join(',');
      });
      //CheckBoxFilter
      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(',');

      });
      });

  }

这是functions：

  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));
    }
  }
  paramFilter(changeParam: MatCheckboxChange){
    if (this.filterParamasBoxes.value.some((a: any) => a === changeParam.source.value)) {
      this.filterParamasBoxes.next(this.filterParamasBoxes.value.filter((a: any) => a !== changeParam.source.value));
    } else {
      this.filterParamasBoxes.next(this.filterParamasBoxes.value.concat(changeParam.source.value));
    }
}

这是我的checkboxes html：

  <!--Check Box Search-->
  <div class="CheckBoxStyle">
      <mat-checkbox  class="CheckBoxClass" value="RE" (change)="addFilter($event)">refeer</mat-checkbox>
  <mdb-icon class="IconClass"  fas icon="snowflake"></mdb-icon>

  <br>
<br>
    <mat-checkbox  class="CheckBoxClass" value="RG" (change)="addFilter($event)"  >dry</mat-checkbox>
    <mdb-icon  class="IconClass" fas icon="tint" matBadge="22" matBadgePosition="above after"></mdb-icon>
    <br>
<br>
<mat-checkbox  class="CheckBoxClass" value="OT" (change)="addFilter($event)">Open Top</mat-checkbox>
<mdb-icon class="IconClass" fas icon="box-open"></mdb-icon>
<br>
<br>
<mat-checkbox  class="CheckBoxClass" value="HC" (change)="addFilter($event)">Flat</mat-checkbox>
<mdb-icon class="IconClass" fas icon="grip-lines"></mdb-icon><br><br>
<mat-checkbox  class="CheckBoxClass" value="MRR" (change)="paramFilter($event)">MRR</mat-checkbox>
</div>

添加有效的stackblitz链接-> https://stackblitz.com/edit/marin-project-stackblitz

您将无法看到任何数据作为其内部API。

我认为问题在于filter中的NgOnInit是method中MatTable的{{1}}。因此它一次只能执行1次，而不能执行更多次然后那个。

如何使用多个复选框过滤数据表

0 个答案: