html - kako filtrirati DataTable s više potvrdnih okvira

Imam Mat-Tablicu koju želim filtrirati. Imam jedan set checkboxes iste varijable koji radi. Ali kada sam želio dodati drugi set, tablica se ne filtrira prema njima jer se čini da i dalje traži u istom stupcu.

Ovo je moja komponenta 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(',');

      });
      });

  }

Ovo su funkcije :

  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));
    }
}

i ovo su moji 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>

Dodavanje radnog stackblitz linka -> https://stackblitz.com/edit/marin-project-stackblitz

Nećete moći vidjeti nikakve podatke jer je to interna API.

Mislim da je problem s filter u NgOnInit jer je to metoda MatTable u angular. Dakle, možda može raditi samo jednu stvar odjednom i ne više od toga.